基於它在CSS中的DIV大小來調整圖像大小？

下面是我正在處理的博客的圖像。儘管我需要一些CSS的幫助。在頂部圖像中，當右側的文本主體大於圖像時，可以看到我的頭像發生了什麼。基於它在CSS中的DIV大小來調整圖像大小？

底部圖像是我希望它看起來如何。

我的問題是有多個作者，所以根據作者的不同，右側的正文文本可以有不同的長度。我想以某種方式將圖像重新調整大小，使其始終適合div，並且看起來像是在底部圖像中顯示的。

希望這一切是有道理的，如果有人知道如何做到這一點，我希望得到任何幫助

我也把一些示例代碼在這裏看到它住http://dabblet.com/gist/2050005

enter image description here

來源

2012-03-17 JasonDavis

強制圖像到特定的大小，而不管原始大小。

CSS：

.size-image img { 
width: 200px; 
height: 200px; 
}

尺寸是不論大小，你需要/想填補。在html中，只需將該類添加到img元素。

<img src="path/to/image" class="size-image" />

那麼任何圖像放入該元素，無論是通過jQuery的，PHP或什麼的，該元件的尺寸以具體你需要/想什麼。

您也可以將圖像放在它自己的容器中，比如說「left-container」，左邊的容器的寬度爲具有自動高度的特定寬度，只將<img>標籤放在左邊的容器中，「合適的容器」

希望這有助於

來源

2012-03-17 01:07:20

感謝您的幫助，我的問題現在的問題是，如果我將它設置爲200像素，我不知道多久了生物信息將會是，所以如果時間更長，它可能會更大，或者可能會更小。也許如果我設置'max-width'和'max-height'會解決這個問題 – JasonDavis 2012-03-17 01:10:40

然後嘗試左/右容器的想法。創建一個父'div'，然後'div'作爲左容器，其中將包含'img'和容器，它將容納文本。即使文字的大小大於圖像的大小，它也會始終保留在容器中。只要確保將左側容器浮動到左側然後在下一個div中在容器div外面確保清除浮動 – 2012-03-17 01:20:21

考慮一下，爲了「動態」更改圖像的大小，您可以執行寬度：100％，高度：100％，但問題是，如果圖像元素的寬度或它包含div，阻止其增長（因爲文本在右側），圖像的高度將保持寬度限制。您應該專注於容器而不是調整圖像大小。拉伸圖片時，您會失去圖像質量 – 2012-03-17 01:41:50

爲什麼你就不能這樣做：

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #img-div { width: 250px; } 
      #img-div img { width: 100%; } 
      #text-div { } 
     </style> 
    </head> 
    <body> 
     <div id="img-div"> 
      <img src="example.jpg" /> 
     </div> 
     <div id="text-div"> 
      Lorem ipsum dolor blah blah blah 
     </div> 
    </body> 
</html>

這對我的作品。唯一的問題是當實際圖像小於包含div的寬度時，它會被像素化。

來源

2012-03-17 01:40:39 Tim

這會爲你工作..設置

使用CSS

IMG { 最大寬度：100％; 最大高度：100％ }

來源

2013-02-03 05:24:57 Swarup

我使用這個：

.product p.image { 
text-align: center; 
width: 220px; 
height: 160px; 
overflow: hidden; 
} 
.product p.image img{ 
max-width: 100%; 
max-height: 100%; 
}

來源

2017-09-03 13:51:52 Flavio

基於它在CSS中的DIV大小來調整圖像大小？

回答

相關問題