php-css编辑图像调整大小（wordpress主题）

Question

I need your help with the following theme.

http://www.korevolution.com/risorse-gratuite/free-wp-theme/koresponsive/

I want to change the size of the images on index page and also the size of image on each post.

I found the code below on functions.php and stylesheet.css,bust just editing it isnt enough.

Functions.php code

add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );
if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 314, 200, true );
add_image_size( 'related', 50, 50, true ); 
add_image_size( 'home_img', 314, 200, true ); 
add_image_size( 'single_img', 600, 300, true );  
add_image_size( 'page_img', 920, 350, true ); 
add_image_size( 'slider_img', 600, 280, true ); 

Stylesheet.css code

.img-home, .feat-thumb a
max-width: 314px;
max-height: 200px;
display: inline-block;

.img-single, .feat-thumb-s a
max-width: 600px;
max-height: 300px;
display: inline-block;

Any ideas?

Answer 1

Changing the CSS should do it... when I change the value of the max-width property of .feat-thumb a to something smaller in Chrome I see it resize as expected. You may not be editing it correctly (for example you may not have server-side file permissions set up to save edits made to templates through the Wordpress admin panel - try FTP instead), or you may be seeing a cached stylesheet and need to clear your browser's cache to load the updated stylesheet.

The add_image_size() references in functions.php for home_img and single_img are only used when an image is first uploaded, so it is not retroactive so in order to update images uploaded previously you need to use a plugin - I like this one: AJAX Thumbnail Rebuild

However, in a responsive theme, images are generally set to either width: 100% or max-width: 100% (in this case the latter) and depend on the size of their parent container or in some cases a more distant ancestor container, which is why you are updating the CSS value for .feat-thumb a, the anchor element that wraps the img, rather than the img directly, so in many cases just updated add_image_size() wouldn't be enough without CSS tweaks as well (and really, changing the calls to add_image_size() wouldn't matter because regardless of actual size the images in a responsive design will generally never be more than 100% the width of their smaller container).

If you are certain the CSS update is being applied/loaded (e.g. you can inspect it in your browser from the server and it's not a file permissions or cache issue) you can try adding !important to the end of the styles (sloppy) or copy and paste them at the end of the stylesheet and add another element to the selector chain to ensure they are of higher specificity (e.g. body .feat-thumb a rather than .feat-thumb a). However I suspect you are having some other issue because as I said I can see the results on the front end when I modify the CSS directly in Chrome.