Stretch Image to Fit 100% Div Chiều cao và rộng

Question

Tôi có một div với CSS sau đây

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

và HTML của tôi trông như thế này

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

Tôi muốn hình ảnh web của tôi để luôn luôn có cùng kích thước (trong tỷ lệ khung hình 1: 1) bất kể độ phân giải của hình ảnh thực tế là bao nhiêu. Nếu các tệp hình ảnh thực tế của tôi là hình vuông (với tỷ lệ 1: 1) thì đây không phải là vấn đề. Nhưng nếu các tệp hình ảnh thực tế không phải là hình vuông thì hình ảnh web được hiển thị sẽ kéo dài đến 100% cả chiều cao và chiều rộng của div (trong trường hợp này là 200px).

Làm cách nào để có được các kích thước hình ảnh khác nhau để phù hợp với DIV của tôi?

Answer 1

Bạn đang trộn ký hiệu. Nó phải là:

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

(lưu ý, không px). Hoặc:

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

(bằng cách sử dụng phong cách thuộc tính) Thuộc tính phong cách có thể được thay thế bằng CSS sau đây:

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

hoặc

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

Answer 2

Thay vì thiết lập độ rộng tuyệt đối và chiều cao , bạn có thể sử dụng tỷ lệ phần trăm:

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

Answer 3

Hoặc bạn có thể đặt trong CSS,

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