HTML - Bootstrap - Come ritagliare la parte centrale di un'immagine

Sto creando un sito Web e voglio ritagliare un'immagine su un'immagine quadrata basata sull'orientamento dell'immagine. Non ho molta familiarità con i CSS, quindi non sono sicuro di come affrontare questo problema.HTML - Bootstrap - Come ritagliare la parte centrale di un'immagine

Se si tratta di un'immagine del paesaggio (800x500), allora voglio l'immagine ritagliata per essere come questo (500x500):

Cropping 800x500 image

Se è ritratto (400x600) allora dovrebbe ritagliare questa parte (400x400) dell'immagine:

Cropping 400x600 image

Come devo fare per raggiungere questo obiettivo? Preferibilmente un metodo che posso usare insieme a "img-responsive" di Bootstrap in modo da poter ridimensionare il ritaglio quando necessario.

Grazie,

fonte

2015-02-11 FljpFl0p

@ FljpFl0p risolvere il problema [jsfiddle] [1]

[1]: https://www.bootply.com/92024 e c'è un'altra risposta qui How to automatically crop and center an image. Tks!

Se si desidera reattiva e con bootstrap 4. Provate questo:

CSS

.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; 
}

fonte

2017-05-25 03:35:15

Add img class-responsivi agli img tag, che scalerà la vostra immagine e mantenere il rapporto larghezza/altezza. Se non sei soddisfatto dei risultati, proverei ad usare Javascript.

fonte

2015-02-11 17:43:10 Jimmy

img-reattiva sarà ridimensionare solo l'immagine orizzontalmente alle dimensioni del suo contenitore, non c'è alcun limite al altezza dell'immagine. – FljpFl0p

Suppongo che devi usare il Javascript per questo. Puoi limitare l'altezza con la proprietà di altezza massima, ma nel tuo caso è inutile. – Jimmy

Sì, usando max-height e overflow: hidden mi aiuterebbe a ritagliare l'immagine nella dimensione che desidero, il solo problema è che sarà sempre la parte superiore dell'immagine. – FljpFl0p

Non sono sicuro se si è abbastanza limitato a solo un approccio CSS, ma un approccio JavaScript avrebbe aiuto ottenendo la dimensione dell'immagine e avvolgendola in un div con overflow:hidden.

$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>

fonte

2017-05-25 05:03:07 ajib

HTML - Bootstrap - Come ritagliare la parte centrale di un'immagine

risposta

Problemi correlati