Question

我在左边栏小部件中有一个图像。宽度是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'/> 

Answer 1

从我的理解，我建议使用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>

Answer 2

当我需要的图像响应，我从来没有使用IMG标签。取而代之的是使用css，你可以通过background-image，background-size和background-position进行更多的控制。

关键是背景大小。从该文档：

盖：缩放的背景图像，使得 背景区域由背景图像完全覆盖要尽可能大。 背景图像的某些部分可能不是鉴于 背景定位区域之内的

包含：缩放图像以最大尺寸，使得它的两个宽度 和它的高度可以容纳在内容区域内

下面是一个演示出这一点：

编辑：更新演示使用Flexbox的控制唤起注意t侧栏和帖子（右侧）。

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>