时间戳

首页 > 解决方案 > 将 img 大小（保留纵横比）自动缩放到父级的 div 高度

html - 将 img 大小（保留纵横比）自动缩放到父级的 div 高度

问题描述

我无法弄清楚如何防止图像（见下文）溢出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>

标签： htmlcsslayout

解决方案

您需要指定将图像保存到display的 anchor( <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>

推荐阅读