Câu trả lời gốc:
Nếu bạn đã sẵn sàng chọn CSS3, bạn có thể sử dụng thuộc tính dịch css3. Thay đổi kích thước dựa trên bất kỳ thứ gì lớn hơn. Nếu chiều cao của bạn lớn hơn và chiều rộng nhỏ hơn vùng chứa, chiều rộng sẽ được kéo dài đến 100% và chiều cao sẽ bị cắt bớt từ cả hai bên. Tương tự với chiều rộng lớn hơn cũng vậy.
Nhu cầu của bạn, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
Và CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Thì đấy! Làm việc: http://jsfiddle.net/shekhardesigner/aYrhG/
Giải trình
DIV được đặt thành relativevị trí. Điều này có nghĩa là tất cả các phần tử con sẽ nhận được tọa độ bắt đầu (điểm gốc) từ nơi DIV này bắt đầu.
Hình ảnh được đặt làm phần tử BLOCK, min-width/heightcả hai đều được đặt thành 100% có nghĩa là thay đổi kích thước hình ảnh bất kể kích thước của nó là nhỏ nhất bằng 100% kích thước của nó. minlà chìa khóa. Nếu theo chiều cao tối thiểu, chiều cao hình ảnh vượt quá chiều cao của phụ huynh thì không vấn đề gì. Nó sẽ tìm nếu chiều rộng tối thiểu và cố gắng đặt chiều cao tối thiểu là 100% của bố mẹ. Cả hai đều ngược lại. Điều này đảm bảo không có khoảng trống xung quanh div nhưng hình ảnh luôn lớn hơn một chút và được cắt bớtoverflow:hidden;
Bây giờ image, điều này được đặt thành một absolutevị trí với left:50%và top:50%. Có nghĩa là đẩy hình ảnh 50% từ trên xuống và sang trái để đảm bảo nguồn gốc được lấy từ DIV. Các đơn vị Left / Top được đo từ đơn vị chính.
Khoảnh khắc kỳ diệu:
transform: translate(-50%, -50%);
Bây giờ, translatechức năng này của thuộc tính CSS3 transformdi chuyển / định vị lại một phần tử được đề cập. Thuộc tính này xử lý phần tử được áp dụng, do đó các giá trị (x, y) OR (-50%, -50%) có nghĩa là di chuyển hình ảnh âm sang trái 50% kích thước hình ảnh và di chuyển lên đầu âm bản bằng 50% kích thước hình ảnh .
Ví dụ. nếu Kích thước hình ảnh là 200px × 150px, transform:translate(-50%, -50%)sẽ được tính để dịch (-100px, -75px). % đơn vị giúp ích khi chúng ta có nhiều kích thước hình ảnh.
Đây chỉ là một cách khó để tìm ra tâm của hình ảnh và DIV chính và khớp chúng.
Xin lỗi vì đã mất quá nhiều thời gian để giải thích!
Tài nguyên để đọc thêm:
background-size: cover;chưa?