使用浏览器不调整图像大小（仅限 CSS/HTML）答案

【问题标题】：Image Not Resizing w/ Browser (CSS/HTML only)使用浏览器不调整图像大小（仅限 CSS/HTML）
【发布时间】：2020-05-28 17:00:11
【问题描述】：

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

@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 类和image 类上添加margin: 0 auto、display: block、padding 等，但最终删除了它们，因为它似乎没有任何区别。（过去也不需要。）

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

任何帮助将不胜感激。

【问题讨论】：

对我来说很好：/
移除图片的内联样式`width="2561" height="445"`
设置width 和height 标签的img 属性导致了问题。删除它

标签： html css responsive-images

【解决方案1】：

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

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

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

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

请注意，您不需要对 div 大小做任何事情，因为它与您放入的任何内容一样大（假设您没有做任何时髦的事情，例如绝对定位）

【讨论】：

感谢您的帮助 :) 在您和其他一些人说基本上没问题之后，我决定继续处理其他一些事情，发现我的预览中没有引用样式表/测试。