Question

我无法弄清楚如何防止图像（如下所示）溢出其中所包含的div。

我已经厌倦了显而易见的解决方案，例如设置height: 100%以及display: block或display: flex的各种组合

如何自动缩放图像（保留宽高比），以使其填充其父div的高度（但不能更多）？

这是HTML文件和CSS文件。按下“运行代码段”可以完美地显示问题。

body {
    margin:  0.0em;
    padding: 0.0em;
}

.banner {
    width: 100%;
    background-color: yellow;
}

.text-one {
    margin:      0.0em;
    padding:     0.2em 0.2em 0.0em;
    font-weight: bold;
}

.text-two {
    margin:     0.0em;
    padding:    0.0em 0.4em 0.5em;
    font-style: italic;
}

.picture {
    float:  right;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Problem</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main">
    <div class="banner">
        <a href="https://www.other-example.com">
            <img class="picture"
                 src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
        </a>
        <div class="both-text">
            <a href="https://www.example.com/">
                <h1 class="text-one">
                    www.Example.com/
                </h1>
            </a>
            <h3 class="text-two">
                The Example Application
            </h3>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

</body>
</html>

Answer 1

您需要指定将图片保存到display的锚点（<a></a>）的inline-block属性。另一种方法是通过指定高度来固定横幅高度，例如height: 100px。

编辑：要动态缩放图片并将其固定在容器中，请使用：

body {
    margin:  0.0em;
    padding: 0.0em;
}

.banner {
    width: 100%;
    background-color: yellow;
    position: relative;
}

.text-one {
    margin:      0.0em;
    padding:     0.2em 0.2em 0.0em;
    font-weight: bold;
}

.text-two {
    margin:     0.0em;
    padding:    0.0em 0.4em 0.5em;
    font-style: italic;
}

.picture {
    height: 100%;
}

.img-container {
    height: 100%;
    right: 0;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Problem</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main">
    <div class="banner">
        <a  class="img-container" href="https://www.other-example.com">
            <img class="picture"
                 src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg">
        </a>
        <div class="both-text">
            <a href="https://www.example.com/">
                <h1 class="text-one">
                    www.Example.com/
                </h1>
            </a>
            <h3 class="text-two">
                The Example Application
            </h3>
        </div>
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

</body>
</html>

Answer 2

将图片类的CSS更改为

.banner a .picture
{ max-width:100%;
  max-height:100%;
}

此max-height，max-width属性将应用于您的班级图片，并相对于其父元素起作用。

自动缩放img大小（保留宽高比）到父级的div高度

2 个答案: