在wordpress中使图像响应？

Posted 2023-05-09

【中文标题】在wordpress中使图像响应？

【英文标题】：Make image responsive in wordpress?

【发布时间】：2016-07-10 07:09:04

【问题描述】：

如何让图像根据屏幕尺寸自动调整大小？

我为图片添加了一个css属性，比如

 img 
 width: 100%;
 height: auto;
 

但这会使小图像采用它所在的容器的形式，如果容器很大，小图像会拉伸并像素化。那么我是否只是为大图像创建特殊的 css 属性？我不希望图像填满它们所在的容器或 div。我只希望它们根据屏幕大小调整大小。表格也应该调整大小。我正在使用 div 和表格。

【问题讨论】：

使用 img 的 css 和媒体查询。在此处阅读更多媒体查询w3schools.com/cs-s-ref/css3_pr_mediaquery.asp

【参考方案1】：

正常插入图片；

在“尺寸”中选择“自定义”；

将“宽度”和“高度”设置为“0”；

在你的 CSS 代码中插入这个：

img 
     border: 0 none;
     max-width: 100%;
     vertical-align: middle;

请参考本页Using Media Queries with Custom CSS