Tránh căng hình ảnh css

Question

Tôi đang hiển thị hình ảnh vào div của tôi. Tôi muốn tránh kéo dài hình ảnh của mình.

div { 
      height: 300px; 
      width: 300px; 
     } 
    img { 
      min-width: 300px; 
      min-height: 300px; 
      max-height: 300px; 
     } 

Vấn đề của tôi là hình ảnh của tôi được vẽ trên bề rộng. Tôi muốn được chiều rộng bình thường, mặc dù một số hình ảnh sẽ bỏ lỡ.

div { 
      height: 300px; 
      width: 300px; 
      overflow: hidden; 
     } 
    img { 
      height: 300px 
      max-width: none; 
      min-width: 300px; 
     } 

Tôi đã giải quyết.

Answer 1

Đặt hình ảnh làm nền div nếu bạn muốn tránh kéo dài cách dễ nhất (vẫn duy trì độ rộng ban đầu).

Answer 2

Sử dụng max-width thay vì min-width và chỉ cần đặt height thành 300px (hoặc chỉ sử dụng max-height).

Answer 3

Bạn có thể sử dụng overflow:hidden để ẩn bất kỳ phần nào của hình ảnh bên ngoài chiều rộng của div.

div { 
     height: 300px; 
     width: 300px; 
     overflow: hidden; 
    } 
img { 
     /*min-width: 300px;*/ 
     height: 300px; 
    } 

Answer 4

Tôi sẽ quên đặt chiều cao tối thiểu và chiều cao tối đa. Chỉ cần thiết lập chiều cao là 300 pixel và đặt một overflow hidden trên thẻ div. Bằng cách đó không có vấn đề gì kích thước hình ảnh nó sẽ luôn luôn ở tỷ lệ và không bao giờ đi ra ngoài ranh giới của thẻ div của bạn.

div { height: 300px; width: 300px; overflow: hidden; } 
img { height: 300px; }