拉伸圖像以適應事業部高度的100％和寬度

Question

我有以下CSS

#mydiv{ 
    top: 50px; 
    left: 50px; 
    width: 200px; 
    height: 200px; 
} 

一個div和我的HTML看起來像這樣

<div id = "mydiv"> 
    <img src = "folder/file.jpg" width = "200px" height = "200px"> 
</div> 

我想我的網絡圖像無論實際圖像的分辨率如何，始終保持相同的尺寸（以1：1的比例配置）。如果我的實際圖像文件是正方形（比例爲1：1），那麼這不是問題。但是，如果實際圖像文件不是正方形，那麼顯示的網頁圖像的寬度將達到div的高度和寬度的100％（在本例中爲200px）。

如何獲得不同的圖像尺寸以適合我的DIV？

Answer 1

你在混合符號。它應該是：

<img src="folder/file.jpg" width="200" height="200"> 

（注意，沒有PX）。或者：

<img src="folder/file.jpg" style="width: 200px; height: 200px;"> 

（使用風格屬性）style屬性可以用下面的CSS來代替：

#mydiv img { 
    width: 200px; 
    height: 200px; 
} 

或

#mydiv img { 
    width: 100%; 
    height: 100%; 
} 

Answer 2

而不是設置絕對寬度和高度，你可以使用百分比：

#mydiv img { 
    height: 100%; 
    width: 100%; 
} 

Answer 3

或者你可以把在CSS，

<style> 
div#img { 
    background-image: url(「file.png"); 
    color:yellow (this part doesn't matter; 
    height:100%; 
    width:100%; 
} 
</style>