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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:10:21  来源:igfitidea点击:

CSS Media Queries and Size of Images

cssmedia-queries

提问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-heightmax-width属性:

http://css-tricks.com/css-media-queries/

http://css-tricks.com/css-media-queries/

回答by miksiii

You can do it by using the css min-width/heightproperty. It is really easy and straightforward thing.

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