使图像响应？

Question

所以这是我当前的代码

width: 40%;
height:auto
position: absolute;
left: 0;
right: 0;

问题是只有当浏览器的宽度增加时图像尺寸才会增加，如果高度增加，图像尺寸会保持不变。当浏览器的高度增加时，我会改变图像的大小，因为它对于移动来说太小了...

Answer 1

为了使您的图片尺寸最小化，以便手机会看到比40％宽度更大的版本，是使用最小宽度：

min-width: 300px;

当屏幕宽度的40％小于400像素时，图像将停止缩小。但是，在移动设备上，您可能只想使用媒体查询：

@media all and(max-width:400px){
    img { width: 100%; }
}

如果您的屏幕尺寸小于400像素，则上面的内容将填满您屏幕的宽度，定位到大多数移动浏览器。

Answer 2

你可以使用vmin。

宽度：100vmin; （它使用低于其他的属性）

如果窗口高度为800px且宽度为1000px，则vmin表示100％的高度，即800px 或窗口高度800px和宽度600px，vmin表示宽度的100％，即600px，

该数字是财产的百分比。

Answer 3

您可以使用vw单位作为身高。例如：

height: 30vw;

这将使高度始终等于视口宽度的30％ - 即使您重新缩放。

视口高度大小也有vh个单位。

编辑：如果你想在高度增加时增加宽度，你可以这样做：

width: 50vh;

以下小提琴（1）将在浏览器调整大小时更改高度和宽度。如您所知，宽度随着视口高度的增加而增加。

FIDDLE 1

下面的小提琴（2）具有静态高度，但缩放宽度如您所述：

FIDDLE 2