如何调整移动设备上的CSS图像,同时保持宽高比
问题描述:
我们的网站没有响应,其中一项要求是在移动设备上呈现图像,以便它们适合屏幕,并且我们遇到了问题,因为它们有所不同尺寸的图像上传到网页如何调整移动设备上的CSS图像,同时保持宽高比
这是我们的CSS代码如下所示
@media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
所以此工程罚款600×400的图像,因为纵横比是相同的。然而,当我们有不同大小的图像时,比如说400X578,上面的CSS代码将不起作用,图像看起来真的被拉长和扭曲。
这里有什么好的解决方案,因为我不是前端开发人员。
任何帮助表示赞赏。
感谢
答
修改你的CSS以下几点:
@media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
这将允许您指定图像的宽度和高度会自动调整自身成正比的宽度。
+0
我将!important属性设置为height:auto。这解决了这个问题 – doglin 2015-04-20 19:55:42
最好的方法是使用%作为宽度,并将高度设置为自动(以便保持宽高比。 – Sammy 2015-03-31 22:26:11
将高度:auto;'添加到img标记 – fcastillo 2015-03-31 22:27:26