图片未通过浏览器调整大小（仅 CSS/HTML）

Question

在我当前的项目中，我只想使用 CSS/HTML 来获取我的图像，在中，以随页面调整大小。我在以前的网站上有过这个工作，现在......它不是。当浏览器 window 调整大小时，它只是从右侧切掉图像；没有任何调整大小。

@charset "utf-8";
/* CSS Document */

div.divBannerScale {
 width: 100%;
 height: auto;
}

img.bannerScale {
  max-width: 100%;
  min-width: 40%;
  height: auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link href="/css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="bannerDIVcontainer" class="divBannerScale">
 <img src="Images/bannerFull-01.png" width="2561" height="445" class="bannerScale" />
</div>

</body>
</html>

我试过在每个 div class 和 image class 但最终删除了它们，因为它似乎没有什么不同。（过去不需要。）

我真的不明白为什么它在另一个编码更混乱的网站上现在不起作用。显然，我不是专家，但通常我可以弄清楚这些事情。

如有任何帮助，我们将不胜感激。

Answer 1

也许您的图片已经是原始尺寸的 40%？在我的测试中，代码似乎运行良好。

修剪掉所有多余的 CSS 就剩下了（如果最小宽度确实太大了）：

img.bannerScale {
  max-width: 100%;
  min-width: 1%;
  height: auto;
}

你可以看到一个活生生的例子here。

请注意，您不需要对 div 尺寸做任何事情，因为它会和您放入其中的任何东西一样大（假设您没有做任何时髦的事情，例如绝对定位)

图片未通过浏览器调整大小（仅 CSS/HTML）

Image Not Resizing w/ Browser (CSS/HTML only)

html

css

responsive-images