如何在 CSS 中调整窗口大小时的图像大小？答案

【问题标题】：How to resize image on window resize in CSS?如何在 CSS 中调整窗口大小时的图像大小？
【发布时间】：2013-07-18 12:18:44
【问题描述】：

我想在调整窗口大小时调整图像大小。

我的窗口是1600x1200。我的头像是1000x500。

我尝试使用background-size: cover，它可以工作，但图像质量很差。

如果窗口大于 1000 像素，是否可以将图像保持在最大 1000 像素如果窗口小于 1000 像素，则根据屏幕调整大小（例如 background-size: cover）？

【问题讨论】：

使用“em”单位，例如宽度：10em;
你身上有背景图片吗？
@ChrisLaarman 不，在 div 上

标签： jquery css image responsive-design

【解决方案1】：

嘿，试试这个：

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

【讨论】：

【解决方案2】：

是的，有媒体查询

@media(min-width:1000px){
.class{background-size: auto}
}
@media(max-width:999px){
.class{background-size: cover}
}

【讨论】：

【解决方案3】：

检测屏幕尺寸

var width = screen.width;
var height = screen.height; 
var img = document.getElementById(image_id); 
img.height = img.height * width / img.width;
img.width = width;

CSS：

img{ width: 100% }

【讨论】：

我们不是在寻找纯 CSS 解决方案吗？