Bildgrößen proportional mit CSS ändern?

Ich habe seit ein paar Tagen versucht, meine Thumbnail-Galerie so zu konfigurieren, dass alle Bilder die gleiche Höhe und Breite haben. Jedoch, wenn ich den CSS-Code ändern,Bildgrößen proportional mit CSS ändern?

max-height: 150px; 
max-width: 200px; 
width: 120px; 
height: 120px;

ich Bilder, die alle die gleiche Größe, aber das Seitenverhältnis gedehnt wird, um die Bilder zu ruinieren. Gibt es keine Möglichkeit, den Bildcontainer und nicht das Bild zu skalieren? so dass ich das Seitenverhältnis beibehalten kann. Aber skaliere das Bild immer noch. (Ich habe nichts dagegen, wenn ich etwas von dem Bild abgeschnitten.)

Vielen Dank im Voraus!

Quelle

2013-03-28 Beaniie

116

Dies ist ein bekanntes Problem mit der CSS-Größenanpassung, es sei denn, alle Bilder haben die gleiche Proportion, Sie haben keine Möglichkeit, dies über CSS zu tun.

Der beste Ansatz wäre, einen Container zu haben und die Größe der Bilder (immer die gleichen) zu ändern. In meinem Beispiel habe ich die Breite geändert.

Wenn der Container eine bestimmte Dimension hat (in meinem Beispiel die Breite), wird die Breite des Containers auf 100% erhöht. Die auto auf der Höhe wird das Bild die Höhe proportional zur neuen Breite haben.

Ex:

HTML:

<div class="container"> 
<img src="something.png" /> 
</div> 

<div class="container"> 
<img src="something2.png" /> 
</div>

CSS:

.container { 
    width: 200px; 
    height: 120px; 
} 

/* resize images */ 
.container img { 
    width: 100%; 
    height: auto; 
}

Quelle

2013-03-28 15:27:23 jackJoe

Sie müssen eine Seite (z. B. Höhe) fixieren und die andere auf auto einstellen.

height: 120px; 
width: auto;

, dass das Bild, das auf der einen Seite nur skalieren würde. Wenn Sie das Bild akzeptabel finden beschneiden, können Sie einfach

gesetzt

overflow: hidden;

auf das übergeordnete Element, das etwas beschneiden würde, die sonst seine Größe überschreiten würde.

Quelle

2013-03-28 15:23:32 hexblot

Ich habe dies versucht, aber es gibt mir immer noch Bilder, die alle unterschiedlichen Größen und Formen sind i die Galerie wollen wie so einheitlich sein, [] [] [] [] nicht wie [] [] [] [] [] – Beaniie

Verwenden Sie eine Kombination aus beiden oben: Stellen Sie Höhe auf eine Zahl (mit automatischer Breite, um die Skala zu halten), und begrenzen Sie das übergeordnete Element auf eine bestimmte Breite mit 'overflow: hidden', um den Überschuss zu beschneiden – hexblot

Schön, es Dankeschön! – Beaniie

es als Hintergrund Setzen Sie zum Beispiel auf dem Halter

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;"> 
&nbsp; 
</div>

Dies wird zentriert Ihr Bild in einem 120x120 div Abhacken Überschüssiges des Bildes

Quelle

2013-03-28 15:27:39 DickieBoy

können Sie object-fit css3 Eigenschaft verwenden, so etwas wie

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset='utf-8'> 
 
    <style> 
 
    .holder { 
 
     display: inline; 
 
    } 
 
    .holder img { 
 
     max-height: 200px; 
 
     max-width: 200px; 
 
     object-fit: cover; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='twiddla.png'> 
 
    </div> 
 
    <div class='holder'> 
 
    <img src='meld.png'> 
 
    </div> 
 
</body> 
 

 
</html>

Es ist aber nicht genau deine Antwort, weil es den Container nicht dehnt, sondern sich verhält die Galerie und Sie können weiterhin die img selbst gestalten.

Ein weiterer Nachteil dieser Lösung ist immer noch eine schlechte Unterstützung der css3-Eigenschaft.Weitere Details finden Sie hier: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. jQuery-Lösung kann auch dort gefunden werden.

Quelle

2013-07-08 05:23:26

Danke, nette Lösung. :) – Bibhu

Das ist irgendwie seltsam, mit einer Eigenschaft zu antworten, die nur in Opera atm unterstützt wird ?! http://caniuse.com/object-fit –

Ich sehe Ihren Punkt, @Simon, danke. Ich erwähnte, dass ich keine Ahnung habe, ob die Immobilie überall unterstützt wird, aber selbst wenn es nicht möglich ist, können wir es als Ausgangspunkt verwenden, um nach Alternativen zu googlen, die es ersetzen. Ein weiterer Grund zum Posten ist, dass die Antwort für einige Zeit erhalten bleibt, während die Browser mit jedem Tag besser werden, also antwortete ich auch auf diese nahe Zukunft. –

Um Bilder einstellbar/flexibel machen Sie diese nutzen könnten:

/* fit images to container */ 
.container img { 
    max-width: 100%; 
    height: auto; 
}

Quelle

2014-04-30 17:08:09 Stanislav

, wenn Sie die SPECT-Verhältnis wissen Sie padding-bottom mit Prozentsatz der Höhe einstellen, je nach mit der diff verwenden können.

<div> 
    <div style="padding-bottom: 33%;"> 
     i have 33% height of my parents width 
    </div> 
</div>

Quelle

2016-01-13 20:59:57 reco

Bildgrößen proportional mit CSS ändern?

Antwort

Verwandte Themen