CSS媒体查询和图像尺寸

Question

3

我目前正在将CSS媒体查询应用于我的WordPress博客，并且我想知道是否有任何已知的方法可以将宽度为400-600px的博客图片调整大小以适应iTouch、iPhone和其他具有小屏幕的智能手机的屏幕分辨率。

我的想法是添加这个CSS：

.blogpost img {
    width:55%;
    height:55%;
}

我希望能够自动调整我的博客中所有图片的大小。我需要在这方面寻求帮助。我不满意自己的方法，因为我听说这样会扭曲图片。有什么专业建议吗？

- Kleigh Heart Garcia

3个回答

0

尝试使用CSS的max-height和max-width属性：

- Head

问题：如果我实现.img-container，是否需要访问所有图像并添加<div class="img-container"></div>？这有点难做，特别是对于具有数千个图像的照片/博客。 - Kleigh Heart Garcia

也许只需构建一个包含文件，然后在其中设置一个图像变量，该变量设置宽度和高度以及需要填充的任何图像... - Head

-1

你可以使用CSS的min-width/height属性来实现。这是一件非常简单和直接的事情。

- miksiii

这确实为理解的人提供了一个答案。 - miksiii

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason · Accepted Answer

如果您同时指定宽度和高度，它会扭曲图像，为什么不只指定其中一个？然后，您可以添加min-width以确保它不会变得太小。只要不指定高度，高度将随宽度调整。

.blogpost img {
width:55%;
min-width:220px;
}

您也可以采用另一种方式，将图像设置为100％宽度，然后确保它不超过其实际宽度（以避免扭曲）。如果所有图片大小相同，则此方法效果很好。

.blogpost img {
width:100%;
max-width:600px;
}