Question

我希望我的img有高度：18em，但是当在移动视图中加载网站时，我希望img尽可能高，但没有img超过宽度：100％。

img的CSS代码是什么？

我目前的代码是：

＆＃13;

print data_f1

＆＃13;

但是当在移动视图中加载时，图像的高度和宽度彼此不成比例。高度保持在18em，宽度收缩至100％。我希望图像缩放的宽度为100％。

我知道这是一个简单的问题，但我无法使其发挥作用。我使用比例为16：9和1：1的图像，所以我总是遇到问题...... 有人能帮助我吗？

Answer 1

首先使用媒体屏幕检查手机尺寸，然后将移动版的CSS设置为媒体屏幕区域

@media screen and (min-width: 480px) {
    .img{
       height: 9em;
       max-width: 100%;
     }
}

Answer 2

用>>> re.sre_parse.parse("^[0-9]{3}[A-Z][0-9]{3}$").data [('at', 'at_beginning'), ('max_repeat', (3, 3, [('in', [('range', (48, 57))])])), ('in', [('range', (65, 90))]), ('max_repeat', (3, 3, [('in', [('range', (48, 57))])])), ('at', 'at_end')] >>>替换height是否可以解决问题？

如果没有，您应该使用一些媒体查询来增强移动视图和桌面视图上的ux。

Answer 3

您可以在移动视图中使用height:auto

@media screen and (min-width: 480px) {
    .img {
       height: auto;
       max-width: 100%;
     }
}

设置图像高度，但按宽度限制图像大小

3 个答案: