CSS 媒体查询和图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14147545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Media Queries and Size of Images
提问by Kleigh Heart Garcia
I'm currently implementing the CSS Media Queries in my WordPress blog and I'm wondering is there any known method on how could I resize a blog image with a width of 400-600px to fit in a screen resolution of an iTouch, iPhone and other smartphone which have small screens.
我目前正在我的 WordPress 博客中实施 CSS 媒体查询，我想知道是否有任何已知的方法可以调整宽度为 400-600 像素的博客图像的大小以适应 iTouch、iPhone 和其他具有小屏幕的智能手机。
My idea is to add this CSS:
我的想法是添加这个CSS：
.blogpost img {
width:55%;
height:55%;
}
so that it would automatically resize allthe images in my blog. I need help with this matter. I'm not contented with my approach since I've heard that it will distort the image. Any professional advice?
以便它会自动调整我博客中所有图像的大小。我需要这件事的帮助。我对我的方法并不满意，因为我听说它会扭曲图像。有什么专业建议吗？
回答by Jason
It'll distort the image if you specify both the width and the height, why not just specify one? Then you can add a min-width to make sure it doesn't get too small. The height will adjust with the width as long as you don't specify it.
如果同时指定宽度和高度，它会扭曲图像，为什么不只指定一个？然后您可以添加一个最小宽度以确保它不会变得太小。只要您不指定高度，高度就会随宽度一起调整。
.blogpost img {
width:55%;
min-width:220px;
}
Or you could approach it a little differently and instead make the image 100% width, then make sure it doesn't go over it's actual width (so you don't distort it). This would work well if all of your images were the same size.
或者您可以稍微不同地处理它，而是将图像设为 100% 宽度，然后确保它不会超过其实际宽度（因此您不会扭曲它）。如果您的所有图像大小相同，这将很有效。
.blogpost img {
width:100%;
max-width:600px;
}
回答by Supplement
Try using CSS's max-heightand max-widthproperties:
尝试使用 CSSmax-height和max-width属性：
回答by miksiii
You can do it by using the css min-width/heightproperty. It is really easy and straightforward thing.
您可以通过使用 css min-width/height属性来实现。这真的是一件简单而直接的事情。
