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

Question

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

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

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

试图找到这种困境的答案，我变得非常不知所措，我觉得其他人也会遇到同样的问题。

Answer 1

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

设置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 */
}

Answer 2

您可以使用Bootstrap Class“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">