我不知道如何防止图像(如下所示)溢出包含它的 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>最佳答案
您需要指定 display将图像保存到 <a></a> 的 anchor ( 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>关于html - 将 img 大小(保持宽高比)自动缩放到父级的 div 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51597910/