Ich möchte ein Bild nur dann abschneiden, wenn die Breite größer ist als der Container

Question

Ich mache eine Website für einen meiner Kunden. Das Problem ist, dass alle Bilder nicht gleich sind. Ich habe eine Höhe von 500px und eine Breite von 800px. jetzt möchte ich, dass die Höhe immer voll ist, also habe ich img {Höhe: 100%; width: auto;} aber jetzt was ich will ist, wenn die breite größer ist, dass es das bild schneidet, so dass die mitte des bildes immer zulässig ist. Aber ich wollte nur, dass es abgeschnitten wird, wenn die Breite kleiner als 800 Pixel ist.

Danke für alle Antworten in advence.

Answer 1

für den evrybody habe ich die antwort gefunden.

dies ist die CSS, die ich verwende:

.custom-page-thumbnail-container{ 
    float:left; 
    text-align: center; 
    width: 350px; 
    overflow: hidden; 
    height: 350px; 
} 
.custom-page-thumbnail-container img{ 
    width: auto; 
    height: 100%; 
    border-top: 6px double #186F38; 
    margin-left: -100%; 
    margin-right:-100%;} 

es wirklich gut funktioniert. frag mich nicht, warum das funktioniert, aber es tut

Answer 2

Mit der Eigenschaft CSS background-size können Sie proportional skalieren und den Überstand automatisch abschneiden lassen.

Sie können dies erreichen, indem er so etwas wie dies in Ihrem CSS tun:

.imgFill 
{ 
    width: 800px; 
    height: 500px; 
    background-size: cover; 
} 

in Ihrem HTML Sie es wie folgt verwenden:

<div class="imgFill" style="background-image:url(path/to/image_01.jpg)"></div> 

Answer 3

Flexbox das tun können:

div { 
 
    height: 250px; 
 
    width: 400px; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    justify-content: center; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
}

<div> 
 
    <img src="http://www.fillmurray.com/1200/300" alt="" /> 
 
</div> 
 

 
<div> 
 
    <img src="http://www.fillmurray.com/200/300" alt="" /> 
 
</div>