我在左侧边栏小部件中有一个图像。宽度为100％。是否可以根据帖子的长度自动更改图像的高度？我希望最小高度为450px，最大1000px，并在此范围之间自动调整。应该添加什么CSS标签？
<div id="HTML5" class='widget HTML">
<div class="widget content">
和
<img src='https://abcd' style='width:100%; height:???; border:none;
margin-bottom: 5px; padding:3px'/>
答案 0 :(得分：0)
根据我的理解，我建议使用flexbox，为您的图片设置最小高度和最大宽度，它会使其依赖于其父级侧边栏，在侧边栏中您可以设置限制400px和1000px;
.container{
height:100%;
background:red;
}
.content{
display:inline-block;
width:60%;
}
.sidebar {
display: inline-flex;
vertical-align:top;
justify-content: center;
align-items: center;
border: 1px solid;
width: 39%;
height: 100%;
min-height:450px;
max-height:1000px;
}
.sidebar img
{
max-width:100%;
max-height:100%;
}<div class='container'>
<main class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis, ante vitae sagittis mattis, dui turpis rutrum odio, eget varius diam ligula lobortis metus. In hac habitasse platea dictumst. Sed orci odio, ultrices nec ipsum a, ultricies vestibulum metus. Proin suscipit rhoncus libero ac fermentum. Fusce non dolor non dui tincidunt iaculis et ut diam. Aenean semper massa libero, eget maximus dolor sodales at. Nullam maximus sollicitudin nunc sit amet faucibus. Integer lorem erat, cursus ut odio in, convallis vehicula dui. Cras maximus facilisis lorem, ac sodales leo vulputate ac. Quisque mattis ante non sem euismod fringilla. Ut neque magna, interdum eu mattis et, malesuada rhoncus est. Duis odio dui, viverra mattis arcu et, laoreet tincidunt mauris. Cras scelerisque quam quis euismod lobortis.
Nullam aliquam diam nunc, et finibus mi gravida in. Nam et diam vel leo lobortis lobortis ut in metus. Integer vitae vehicula nulla. Ut ex risus, bibendum vitae urna ut, cursus luctus mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse eget arcu justo. Ut id congue enim. Donec nunc ex, rhoncus sit amet rhoncus a, dictum at lacus. Morbi lorem eros, accumsan non nulla nec, viverra ullamcorper libero. Duis non ex elit. Maecenas sapien eros, volutpat quis lorem consectetur, laoreet feugiat nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis, ante vitae sagittis mattis, dui turpis rutrum odio, eget varius diam ligula lobortis metus. In hac habitasse platea dictumst. Sed orci odio, ultrices nec ipsum a, ultricies vestibulum metus. Proin suscipit rhoncus libero ac fermentum. Fusce non dolor non dui tincidunt iaculis et ut diam. Aenean semper massa libero, eget maximus dolor sodales at. Nullam maximus sollicitudin nunc sit amet faucibus. Integer lorem erat, cursus ut odio in, convallis vehicula dui. Cras maximus facilisis lorem, ac sodales leo vulputate ac. Quisque mattis ante non sem euismod fringilla. Ut neque magna, interdum eu mattis et, malesuada rhoncus est. Duis odio dui, viverra mattis arcu et, laoreet tincidunt mauris. Cras scelerisque quam quis euismod lobortis.
Nullam aliquam diam nunc, et finibus mi gravida in. Nam et diam vel leo lobortis lobortis ut in metus. Integer vitae vehicula nulla. Ut ex risus, bibendum vitae urna ut, cursus luctus mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse eget arcu justo. Ut id congue enim. Donec nunc ex, rhoncus sit amet rhoncus a, dictum at lacus. Morbi lorem eros, accumsan non nulla nec, viverra ullamcorper libero. Duis non ex elit. Maecenas sapien eros, volutpat quis lorem consectetur, laoreet feugiat nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sagittis, ante vitae sagittis mattis, dui turpis rutrum odio, eget varius diam ligula lobortis metus. In hac habitasse platea dictumst. Sed orci odio, ultrices nec ipsum a, ultricies vestibulum metus. Proin suscipit rhoncus libero ac fermentum. Fusce non dolor non dui tincidunt iaculis et ut diam. Aenean semper massa libero, eget maximus dolor sodales at. Nullam maximus sollicitudin nunc sit amet faucibus. Integer lorem erat, cursus ut odio in, convallis vehicula dui. Cras maximus facilisis lorem, ac sodales leo vulputate ac. Quisque mattis ante non sem euismod fringilla. Ut neque magna, interdum eu mattis et, malesuada rhoncus est. Duis odio dui, viverra mattis arcu et, laoreet tincidunt mauris. Cras scelerisque quam quis euismod lobortis.
Nullam aliquam diam nunc, et finibus mi gravida in. Nam et diam vel leo lobortis lobortis ut in metus. Integer vitae vehicula nulla. Ut ex risus, bibendum vitae urna ut, cursus luctus mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse eget arcu justo. Ut id congue enim. Donec nunc ex, rhoncus sit amet rhoncus a, dictum at lacus. Morbi lorem eros, accumsan non nulla nec, viverra ullamcorper libero. Duis non ex elit. Maecenas sapien eros, volutpat quis lorem consectetur, laoreet feugiat nulla.
</main>
<aside class="sidebar">
<img src="http://placehold.it/100x1000" />
</aside>
</div>
答案 1 :(得分：0)
当我需要对图像的响应时，我从不使用 img 标记。相反，使用css，您可以通过背景图像，背景大小和背景位置进行更多控制。
关键是背景大小。来自文档：
封面：将背景图片缩放到尽可能大的位置 背景区域完全被背景图像覆盖。 背景图像的某些部分可能不在视图中 背景定位区域
包含：将图像缩放到最大尺寸，使其宽度均为 并且它的高度可以适合内容区域
以下是一个演示：
编辑：更新了演示，使用 flexbox 来控制侧边栏和帖子（右侧）的高度。
function init() {
$('.post').text('blah blah');
}
function generatePost(isLong) {
var text = [];
var length = isLong ? 1000 : 100;
for (var i = 0; i < length; i++) text.push('blah');
$('.post').text(text.join(' '));
}
$(function() {
init();
}).page {
display: flex;
}
.sidebar {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/76/22/5b/76225b3c2d672b5ddb6afc0bc5724488--rainy-days-rainy-weather.jpg');
width: 125px;
min-height: 200px;
background-size: cover;
background-position: center;
}
.main {
width: 400px;
max-height: 700px;
overflow-y: scroll;
background: #f3f3f3;
padding-left: 10px;
border: 1px solid #ccc;
}
.sidebar.tall {
height: 500px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="generatePost()">Generate Post</button>
<button onclick="generatePost(true)">Generate Long Post</button>
<div class="page">
<div class="sidebar">
</div>
<div class="main">
<p class="post">
</div>
</div>