Làm thế nào tôi có thể điền vào một div bằng một hình ảnh trong khi vẫn giữ cho nó cân xứng?

Tôi đã tìm thấy chủ đề này - Làm cách nào để kéo giãn hình ảnh để lấp đầy <div> trong khi vẫn giữ nguyên tỷ lệ khung hình của hình ảnh? - đó không hoàn toàn là điều tôi muốn.

Tôi có một div với kích thước nhất định và một hình ảnh bên trong nó. Tôi muốn luôn điền vào div với hình ảnh bất kể hình ảnh là phong cảnh hay chân dung. Và không có vấn đề gì nếu hình ảnh bị cắt (bản thân div đã ẩn tràn).

Vì vậy, nếu hình ảnh là bức chân dung tôi muốn widthđược 100%và height:autovì vậy nó vẫn theo tỷ lệ. Nếu hình ảnh là ngang, tôi muốn heightlà 100%và tự width to beđộng`. Nghe có vẻ phức tạp phải không?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Vì tôi không biết làm thế nào để làm điều đó, tôi chỉ đơn giản là tạo ra một hình ảnh nhanh về ý tôi muốn. Tôi thậm chí không thể mô tả chính xác nó.

Vì vậy, tôi đoán tôi không phải là người đầu tiên hỏi điều này. Tuy nhiên, tôi thực sự không thể tìm thấy một giải pháp cho điều này. Có lẽ có một số cách CSS3 mới để làm điều này - tôi đang nghĩ đến flex-box. Bất kỳ ý tưởng? Có lẽ nó thậm chí còn dễ dàng hơn tôi mong đợi?

Nếu tôi hiểu chính xác những gì bạn muốn, bạn có thể để lại các thuộc tính chiều rộng và chiều cao khỏi hình ảnh để duy trì tỷ lệ khung hình và sử dụng flexbox để căn giữa cho bạn.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle tại đây

Tôi đã thử nghiệm điều này thành công trong IE9, Chrome 31 và Opera 18. Nhưng không có trình duyệt nào khác được thử nghiệm. Như mọi khi, bạn phải xem xét các yêu cầu hỗ trợ cụ thể của mình.

Tuy hơi muộn nhưng tôi cũng gặp phải vấn đề tương tự và cuối cùng đã giải quyết được nó với sự trợ giúp của một bài đăng stackoverflow khác ( https://stackoverflow.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Hy vọng điều này vẫn giúp ai đó.

Ps: Cũng hoạt động cùng với các thuộc tính css max-height , max-width , min-width và min-height . Nó đặc biệt tiện dụng với việc sử dụng các đơn vị độ dài như 100% hoặc 100vh / 100vw để lấp đầy vùng chứa hoặc toàn bộ cửa sổ trình duyệt.

Một câu hỏi cũ nhưng xứng đáng được cập nhật vì bây giờ có một cách.

Câu trả lời chính xác dựa trên CSS là sử dụng object-fit: cover, hoạt động như thế nào background-size: cover. Vị trí sẽ được thực hiện bởi object-positionthuộc tính, mặc định là căn giữa.

Nhưng không có hỗ trợ nào cho nó trong mọi trình duyệt IE / Edge hoặc Android <4.4.4. Ngoài ra, object-positionkhông được hỗ trợ bởi Safari, iOS hoặc OSX. Polyfills thực sự tồn tại, hình ảnh phù hợp với đối tượng dường như hỗ trợ tốt nhất.

Để biết thêm chi tiết về cách hoạt động của thuộc tính, hãy xem bài viết Thủ thuật CSSobject-fit để được giải thích và giới thiệu.

Điều này nên làm điều đó:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Tất cả các câu trả lời dưới đây đều có chiều rộng và chiều cao cố định, điều này làm cho giải pháp "không phản hồi".

Để đạt được kết quả nhưng giữ cho hình ảnh phản hồi nhanh, tôi đã sử dụng các bước sau:

1. Bên trong hộp chứa đặt một hình ảnh gif trong suốt với tỷ lệ mong muốn
2. Cung cấp cho thẻ hình ảnh nền css nội dòng với hình ảnh bạn muốn thay đổi kích thước và cắt

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Bạn có thể đạt được điều này bằng cách sử dụng các thuộc tính css flex. Vui lòng xem mã bên dưới

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Cân nhắc sử dụng background-size: cover(IE9 +) kết hợp với background-image. Đối với IE8-, có một polyfill .

Thử cái này:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Hi vọng điêu nay co ich

Bạn có thể sử dụng div để đạt được điều này. không có thẻ img :) hy vọng điều này sẽ giúp.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

Cách duy nhất tôi đạt được kịch bản "trường hợp tốt nhất" được mô tả là đặt hình ảnh làm nền:

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Đây là câu trả lời có hỗ trợ IE bằng cách sử dụng object-fitđể bạn không bị mất tỷ lệ

Sử dụng một đoạn mã JS đơn giản để phát hiện xem object-fitcó được hỗ trợ hay không và sau đó thay thế imgchosvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Lưu ý: Ngoài ra còn có một số object-fitpolyfills sẽ object-fithoạt động.

Đây là vài ví dụ:

• object-fit-hình ảnh
• constancecchen / object-fit-pollyfill
• Polyfill cho thuộc tính phù hợp đối tượng CSS

Ở đây bạn có ví dụ làm việc của tôi. Tôi đã sử dụng một thủ thuật đó là đặt hình ảnh làm nền của vùng chứa div với background-size: cover và background-position: center center

Tôi đã đặt hình ảnh với chiều rộng: 100% và độ mờ: 0 khiến nó trở nên vô hình. Lưu ý rằng tôi chỉ hiển thị hình ảnh của mình vì tôi đặc biệt quan tâm đến việc gọi sự kiện nhấp chuột trẻ em.

Xin lưu ý rằng tôi đang sử dụng góc cạnh nó hoàn toàn không liên quan.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Kết quả là kết quả mà bạn xác định là tối ưu trong mọi trường hợp

CSS object-fit: covervà object-position: left centergiá trị thuộc tính hiện giải quyết vấn đề này.

Chỉ cần sửa chiều cao của hình ảnh và cung cấp width = auto

img{
    height: 95vh;
    width: auto;
}