it-swarm.com.de

Machen Sie das Bild vollständig ohne Dehnung ausfüllen

Ich habe große Bilder mit unterschiedlichen Abmessungen, die 240 x 300 x 300 Container in beiden Dimensionen vollständig füllen müssen. Folgendes habe ich jetzt, was nur für eine Dimension funktioniert:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

Die Proportionen sollten gleich bleiben. Im Wesentlichen sollten breite Bilder in der Breite abgeschnitten werden, während hohe Bilder in der Höhe abgeschnitten werden müssen. Vergrößern Sie einfach so viel, wie zum Füllen des Containers erforderlich ist.

Sie sind sich nicht sicher, warum ich es nicht schaffen kann. Benötige ich dazu JavaScript?

Bearbeiten: Um klar zu sein. Ich brauche alles rot auf der Geige. Die Bilder sind dynamisch, daher kann ich keine Hintergrundbilder verwenden. Ich bin offen für die Verwendung von JavaScript. Vielen Dank! :)

20
Lennart

Bilder automatisch an ein Div anpassen - So funktioniert das CSS

Hier ist eine Möglichkeit, beginnen Sie mit dem folgenden HTML-Code:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

und das CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

und die Demo-Geige: http://jsfiddle.net/audetwebdesign/QEpJH/

Wenn Sie ein Bild im Hochformat haben, müssen Sie die Breite auf 100% skalieren. Wenn das Bild im Querformat ausgerichtet ist, müssen Sie die Höhe skalieren.

Leider gibt es in CSS keine Auswahl von Selektoren, die auf das Seitenverhältnis des Bildes abzielen. Daher können Sie CSS nicht verwenden, um die korrekte Skalierung herauszufinden.

Außerdem haben Sie keine einfache Möglichkeit, das Bild zu zentrieren, da die obere linke Ecke des Bildes an der oberen linken Ecke des übergeordneten Blocks fixiert wird.

jQuery Helper

Mit der folgenden jQuery-Aktion können Sie anhand des Seitenverhältnisses des Bildes bestimmen, welche Klasse festgelegt werden soll.

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

Rufen Sie für jedes Bild in .container die Höhe und Breite ab, testen Sie, ob width<height und stellen Sie die entsprechende Klasse ein.

Außerdem fügte ich einen Haken hinzu, um das Seitenverhältnis des enthaltenden Blocks zu berücksichtigen. Vorher hatte ich implizit ein quadratisches Ansichtsfeld angenommen.

40
Marc Audet

Die Zeile herausnehmen: max-width: 100% in Ihrer CSS-Datei scheint den Trick auszuführen.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Außerdem können Sie das schließende div in Ihrer HTML-Datei hinzufügen, um den Code neater zu machen.

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

Hier ist ein funktionierender JSFiddle-Link: http://jsfiddle.net/HsE6H/19/

3
Jcpopp

Für alle, die dies tun möchten und keine dynamischen Bilder haben, finden Sie hier eine reine CSS-Lösung mit Hintergrundbild.

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

Die "Hintergrundgröße: Abdeckung" bewirkt, dass das Bild unter Beibehaltung des Seitenverhältnisses das gesamte Div skaliert. Das CSS kann auch in eine CSS-Datei verschoben werden. Wenn diese Eigenschaft dynamisch generiert wird, muss die Eigenschaft background-image im style-Attribut bleiben.

3
BurningLights

Ich habe dieses Plugin verwendet, das jedes Verhältnis berücksichtigt. Es benötigt auch imagesloaded plugin, um zu funktionieren. Dies ist nützlich für zahlreiche Bilder auf einer Website, die diese Behandlung benötigen. Einfach zu initiieren.

https://github.com/johnpolacek/imagefill.js/

2
lxm7

Hintergrund kann dies tun

  1. bild als Hintergrund festlegen

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

oder 

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
2
comonitos

Sie sollten dies versuchen: 

img {
    min-width:100%;
    min-height:100%;
}
2
user3710425

Es funktioniert, wenn Sie Folgendes zum übergeordneten div für das img-Styling hinzufügen: https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
1
CodingSince007

Dies könnte die Arbeit erledigen:

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}
0
SAST

Ich bin auf dieses Thema gestoßen, weil ich versuchte, ein ähnliches Problem zu lösen. Dann ging eine Glühbirne in meinem Kopf aus und ich konnte nicht glauben, dass es funktionierte, weil es so einfach und so offensichtlich war.

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

Setzen Sie einfach die Mindestbreite und die Mindesthöhe auf 100%. Die Größe wird dabei immer automatisch an das div angepasst und das überflüssige Bild wird abgeschnitten. Kein Muss.

0
outendesigns

Die Verwendung eines Bildes als Div-Hintergrund hat viele Nachteile (z. B. fehlende ALT für SEO). Verwenden Sie stattdessen object-fit: cover; im Image-Tag-Style!

0
Mehdi Saghari

Wir gingen den Weg mit einer Angular-App, bei der eine Variation des jQuery-Ansatzes oben verwendet wurde. Dann entwickelte einer unserer klugen Kollegen einen reinen CSS-Ansatz. Sehen Sie sich dieses Beispiel hier an: https://jsfiddle.net/jeffturner/yrrncees/1/ .

Grundsätzlich löste die Verwendung von Zeilenhöhe das Problem für uns. Für diejenigen, die nicht auf die Geige schlagen wollen, sind die Codefragmente:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Der Schlüssel liegt in der Verwendung von Zeilenhöhe und der Einstellung des Containers für dasselbe.

0
Jeff Turner

Die folgende Lösung ist sehr kurz und sauber, wenn Sie img-Tag in das div-Tag einfügen müssen:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-Shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

Wenn Sie kein div verwenden müssen, können Sie auch ein noch kürzeres css schreiben:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }
0
willy wonka

Hier ist eine andere Lösung, die ich gefunden habe, dass es nicht nötig ist, Portraid oder Landscape oder Scripting zu trennen. 

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Hier ist es, es funktioniert gut ...

https://jsfiddle.net/efirat/17bopn2q/2/

0
efirat