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>