HTML - Önyükleme - Görüntünün orta kısmını nasıl kırpılır

Question

Bir web sitesi oluşturuyorum ve görüntünün yönüne göre bir resmi kare bir görüntüye kırpmak istiyorum. CSS'ye gerçekten aşina değilim, bu yüzden bu sorunu nasıl çözeceğimi bilmiyorum.

bir manzara resmi (800x500) ise o zaman kırpılmış görüntü böyle olmak (500x500) istiyorum:

o portre (400x600) ise o zaman bu bölümünü kırpmak gerekir (400x400) görüntünün:

nasıl bunu başarmak için hakkında gitmeli? Tercihen Bootstrap'in "img-responsive" ile birlikte kullanabileceğim bir yöntem, gerektiğinde kırpılmış olarak yeniden boyutlandırabilirim.

sayesinde görüntünüzü ölçek ve genişlik/yükseklik oranını tutacak etiketi, img için

Answer 1

FljpFl0p @ düzeltmek o [jsfiddle] [1]

[1]: https://www.bootply.com/92024 ve burada How to automatically crop and center an image başka bir cevap yoktur. Tks! İsterseniz

o duyarlı ve deneyin ön yükleme alanı 4. kullanarak bu bir:

CSS oldukça sadece CSS yaklaşımı ile sınırlı, ama eğer bir JavaScript yaklaşımı olur

.thumb-post img { 
    object-fit: none; /* Do not scale the image */ 
    object-position: center; /* Center the image within the element */ 
    width: 100%; 
    max-height: 250px; 
    margin-bottom: 1rem; 
} 

Answer 2

Ekleme sınıfı img-duyarlı. Eğer sonuçlardan memnun değilseniz, Javascript kullanmayı deneyeceğim.

Answer 3

emin değil Görüntünün boyutunu alıp overflow:hidden ile bir div içinde sarmalayarak yardım edin. Sadece kap var boyutuna yatay görüntü rescale olacaktır

$width = $(".box img").css('width'); 
 
$height = $(".box img").css('height'); 
 
$max = (($width < $height) ? $width : $height); 
 

 
$(".box").css("width", $max); 
 
$(".box").css("height", $max);

.box { 
 
    margin: 5px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box"> 
 
    <img src="https://placehold.it/300x200"> 
 
</div>