图像未按比例缩小/放大

Question

不知何故，我的图像根本没有缩小或放大。我在互联网上看到了很多东西，但我无法解决。 W3schools 告诉我用公式横幅图像来制作它。

.formular-banner
{

    max-width: 100%;
    height: auto;
}

<div class="formular-banner">
                        <img src="koala.jpeg">
                    </div>

Answer 1

首先，您要为图像的父元素定义设置，而不是图像本身。所以你不能指望这会对图像产生影响......

对于图像本身，您也不应该使用这些设置，而是应该使用max-width: 100%（使其成为容器的整个宽度）而不是width: 100%，加上一个max-width，它具有图片的原始宽度（以像素为单位），以便不使其比原始图片更大（即扭曲），以防它比容器更小（即宽度更小）。

所以你的 CSS 规则是

.formular-banner > img {
    width: 100%;
    max-width: 1240px; /* use the actual width of your image here */
    height: auto;
}

如果图像小于容器（作为 div = 块元素）默认具有 100% 宽度）并且您希望它居中，您可以添加此规则（用于容器），它将水平在容器内居中图像（作为内联元素）：

.formular-banner {
   text-align: center;
}