css - CSS 媒体查询和图像大小

Question

我目前正在我的 WordPress 博客中实现 CSS 媒体查询，我想知道是否有任何已知方法可以调整宽度为 400-600 像素的博客图像以适应 iTouch、iPhone 和其他具有小屏幕的智能手机。

我的想法是添加这个 CSS：

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

这样它就会自动调整我博客中所有图像的大小。我需要这件事的帮助。我对我的方法不满意，因为我听说它会扭曲图像。有什么专业建议吗？

score 9 · Accepted Answer

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

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

或者您可以稍微不同地处理它，而是将图像设为 100% 宽度，然后确保它不会超出其实际宽度（因此您不会扭曲它）。如果您的所有图像尺寸相同，这将很有效。

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

score 0 · Accepted Answer

0

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

于 2013-01-03T21:31:11.817 回答

score -1 · Accepted Answer

您可以使用 css min-width/height属性来做到这一点。这真的是一件简单而直接的事情。

3 回答 3