用于调整图像大小的 php-css 编辑(wordpress 主题)

Question

我需要您帮助解决以下主题。

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

我想更改索引页上图片的大小以及每个帖子中图片的大小。

我在 functions.php 和 stylesheet.css 上找到了下面的代码，但仅仅编辑它是不够的。

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;

有什么想法吗？

Answer 1

更改 CSS 应该可以做到...当我在 Chrome 中将 .feat-thumb a 的 max-width 属性的值更改为更小的值时，我看到它按预期调整大小。您可能没有正确编辑它(例如，您可能没有设置服务器端文件权限来保存通过 Wordpress 管理面板对模板所做的编辑 - 请尝试使用 FTP)，或者您可能看到缓存的样式表并需要清除您浏览器的缓存以加载更新的样式表。

functions.php 中对 home_img 和 single_img 的 add_image_size() 引用仅在图像时使用是第一次上传，所以它不具有追溯力，所以为了更新之前上传的图像，你需要使用一个插件——我喜欢这个:AJAX Thumbnail Rebuild

但是，在响应式主题中，图像通常设置为 width: 100% 或 max-width: 100%(在本例中为后者)并取决于取决于它们的父容器的大小，或者在某些情况下是更远的祖先容器的大小，这就是为什么要更新 .feat-thumb a 的 CSS 值，这是包装 img 的 anchor 元素，而不是直接 img，所以在很多情况下，如果没有 CSS 调整(实际上，改变调用 add_image_size() 无关紧要，因为无论实际大小如何，响应式设计中的图像通常永远不会超过其较小容器宽度的 100%。

如果您确定正在应用/加载 CSS 更新(例如，您可以在浏览器中从服务器检查它，这不是文件权限或缓存问题)，您可以尝试添加 !important到样式的末尾(马虎)或将它们复制并粘贴到样式表的末尾，然后将另一个元素添加到选择器链中以确保它们具有更高的特异性(例如 body .feat-thumb a而不是 .feat-thumb a)。但是我怀疑您还有其他问题，因为正如我所说，当我直接在 Chrome 中修改 CSS 时，我可以在前端看到结果。