WordPress 博客文章中的响应式图像答案

【问题标题】：Responsive Images in a WordPress Blog PostWordPress 博客文章中的响应式图像
【发布时间】：2018-06-05 05:15:22
【问题描述】：

上周我发布了一个 WordPress 网站的第一个版本，但我很难找出在博客文章中在中放置响应式图片的最佳方式。

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

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

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

【问题讨论】：

嘿，你是对的，是 HTML 中的属性使你的图像伸展。 genofevephotography.com/wp-content/uploads/2017/12/…" alt="" width="640" height="427"> 从例子中可以看出，你有宽度和高度.您必须将 height: auto 添加到您的图像标签中。
谢谢！那行得通。我有一种感觉，我错过了一件非常简单的事情：-/

标签： html css wordpress image responsive

【解决方案1】：

您可以使用引导类“img-responsive”。请尝试此代码

<img class="aligncenter wp-image-167 size-large img-responsive" src="https://genofevephotography.com/wp-content/uploads/2017/12/DSC_3069-1024x683.jpg" alt="" width="640" height="427">

【讨论】：

【解决方案2】：

您可以采取以下措施来确保您的图片始终显示良好。

设置max-width

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

将width 设置为100%

当您缩小图像并将宽度设置为100% 时，您必须通过将height property value 设置为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 */
}

【讨论】：