CSS媒体查询和图像大小 [英] CSS Media Queries and Size of Images

问题描述

我目前正在WordPress博客中实现CSS Media Queries，我想知道是否有任何已知方法可以如何调整宽度为400-600px的博客图像大小以适合iTouch的屏幕分辨率，iPhone和其他具有小屏幕的智能手机.

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.

我的想法是添加此CSS:

My idea is to add this CSS:

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

，以便它将自动调整我博客中所有图像的大小.我需要这件事的帮助.我不满意我的方法，因为听说它会扭曲图像.有专业建议吗?

so that it would automatically resize all the 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?

推荐答案

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

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;
}

或者您可以采取一些不同的方法，而是将图像的宽度设置为100％，然后确保图像不超过其实际宽度(以免扭曲).如果您所有图像的大小都相同，这将很好地工作.

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.

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

这篇关于CSS媒体查询和图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！