html - WordPress 博客文章中的响应式图像

Question

上周我发布了 WordPress 网站的第一个版本，我真的很难找到在博客文章中包含响应式图像的最佳方式。

Example of a blog post with wonky images in the body .

我对“img”标签尝试了 max-width: 100%; 和 width: 100%;，但它们仍然无法正确显示，尤其是在较小的屏幕宽度。我认为 WordPress 正在为每个 img 标签添加“高度”和“宽度”属性。

我越来越不知所措，试图找到这个难题的答案，我觉得其他人也会遇到同样的问题。

Answer 1

您可以执行以下几项操作以确保您的图片始终显示良好。

设置最大宽度

如果图片不是可缩放的图片类型，最好不要超过图片的原始宽度。

将宽度设置为100%

当您缩小图像并将宽度设置为 100% 时，您必须通过将 height 属性值 设置为 auto< 来释放高度。这样，图像将按比例缩小而不会恶化

my-image-holder {
width: 500px; /* can be = or < the images original width */
height: 400px; /* Assuming you do not want the original height */
overflow: hidden; /* Hides vertical overlaps */
}

my-image {
width: 100%;
height: auto; /* Allows the image to scale accordingly */
}