[英]How can I proportionally scale images to max-width?
In a UIWebView, I am using the CSS max-width property to scale images of unknown size to fill a space no larger than (but perhaps smaller than) 300 pixels wide. 在UIWebView中,我使用CSS max-width属性来缩放未知大小的图像,以填充不大于(但可能小于)300像素宽的空间。 Some of the original images are larger, and others are smaller. 一些原始图像较大,而另一些较小。
For now, I'm using the following CSS declaration, which scales the width correctly, but tends to blow out the height of larger images in the iOS WebView: 现在,我正在使用以下CSS声明,它正确地缩放宽度,但往往会夸大iOS WebView中较大图像的高度:
img{
max-width:300px;
margin:10px;
padding:0px;
}
So the question is: What's the correct way to ensure the height scales proportionally along with the width? 所以问题是:确保高度与宽度成比例的正确方法是什么?
(Edited headline and tags to generalize solution. Thanks, matt!) (编辑标题和标签以概括解决方案。谢谢,亚光!)
You want something like this: 你想要这样的东西:
img {
max-width:300px;
height:auto
}
This really has nothing to do with iOS or UIWebView - it's pure standard CSS. 这与iOS或UIWebView无关 - 它是纯粹的标准CSS。
I don't have the reputation points to add comments to the responses, so I'll list it here: 我没有声明点来为回复添加评论,所以我将在此处列出:
img { max-width:300px; img {max-width:300px; height:auto } 身高:自动}
This line of CSS works on Chrome, Firefox and IE, but it only works on desktop browsers. 这一系列的CSS适用于Chrome,Firefox和IE,但它只适用于桌面浏览器。 As stated in the original question, the task is to set up proportional images in iOS; 如原始问题所述,任务是在iOS中设置比例图像; and on iOS Safari, this method doesn't work. 在iOS Safari上,此方法不起作用。
而不是在CSS中使用像素,你可以尝试使用百分比
我相信The First anserwer是真正的高度:100%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.