用于图像大小调整的PHP-CSS编辑(WordPress主题)


php-css editing for image resize (wordpress theme)

我需要你帮助以下主题。

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

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

我在函数.php和样式表上找到了下面的代码.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;

有什么想法吗?

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

functions.php中用于home_imgsingle_imgadd_image_size()引用仅在首次上传图像时使用,因此它不具有追溯性,因此为了更新之前上传的图像,您需要使用插件 - 我喜欢这个: AJAX 缩略图重建

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

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

您可以通过WordPress的图像编辑器和设置更改图像的大小。 完成此操作后,您的CSS应该可以工作。

转到您的 Wordpress 媒体库 (your_website.com/wp-admin/upload.php( 编辑您上传的图像文件

在这里,您可以找到WordPress图像设置帮助