reagierende Bilder unterschiedlicher Breite mit einer gleichbleibenden Höhe

Ich goss durch frühere Antworten, kann aber nicht die genaue Antwort finden.reagierende Bilder unterschiedlicher Breite mit einer gleichbleibenden Höhe

Ich bin auf der Suche nach einem Container Div, die Bilder unterschiedlicher Breite mit einem gemeinsamen Rand hält. Ich möchte eine gleichbleibende Höhe beibehalten, wenn die Größe der Bilder geändert wird, da sich die Breite des Bereichs aufgrund der Größe des Browsers vergrößert und verkleinert.

Ich habe einen jsfiddle, aber kann es nicht herausfinden: https://jsfiddle.net/s8p4wv8m/

max-width: 100%; 
height: auto;

Gibt es etwas mit der Höhe Ich bin fehlt?

Ich kann den reaktionsfähigen Teil erhalten, aber ich möchte die Höhe aller Bilder konsistent machen, ohne das Seitenverhältnis zu beeinflussen, wenn der Browser die Größe ändert.

Die Bilder sind auch nicht notwendigerweise auf einem Rastersystem - sie haben unterschiedliche Breite.

Vielen Dank.

Quelle

2016-12-21 user3808123

In Ihrer Geige ist die Höhe der Bilder untereinander konsistent. Fehle ich etwas? – Nimrod

Hinzufügen "max-Höhe: 62px;" zu den Bildern, die alle Bilder auf die Höhe des kürzesten Bildes beschränken, daher in Ihrem Geigenbeispiel ... ist "62px". – vicgoyso

Dies ist eine nähere Version https://jsfiddle.net/5h54f2co/4/. Momentan reagieren die Bilder reaktionsschnell, wenn das Browserfenster verkleinert wird, sie behalten ihr Seitenverhältnis bei, aber sie verringern sich mit unterschiedlichen Raten, und ich kann das Randrecht nicht zum Arbeiten bekommen. Idealerweise würden sie alle mit der gleichen Rate verkleinert werden, wobei ihre Seitenverhältnisse beibehalten werden und eine gleichbleibende Höhe beibehalten wird. – user3808123

Sie können "max-height: 62px;" zu all deinen imgs, die alle bilder auf die höhe des kürzesten bildes beschränken, also in deinem geigenbeispiel ... ist "62px"

Quelle

2016-12-21 18:56:20 vicgoyso

Danke - eine Frage - wenn ich die Fiedel aktualisiere - sie fangen auf der gleichen Höhe, aber wenn ich es verkleinere, beginnen die schmaleren Bilder mehr als das horizontale Bild zu schrumpfen - gibt es eine Möglichkeit zu korrigieren Das? – user3808123

Ist das wonach du suchst?

Die Bilder werden mit dem Fenster skaliert.

Auch: Die Bilder in Ihrer Geige haben immer Höhenanpassungsprobleme, einige sind Porträt und einige sind Landschaft), es sei denn, Sie sind ok mit ihnen zugeschnitten werden.

.row { 
 
    width: 100%; 
 
} 
 

 
.fluid-width-fixed-space img { 
 
    margin: 2% auto; 
 
    display: block; 
 
    height: auto; 
 
    border: 1px solid #000; 
 
    max-width: 100% 
 
}

<div class="row"> 
 
    <div class="fluid-width-fixed-space col-xs-12 col-sm-8 col-md-10 col-lg-12"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/550x150"> 
 
    <img src="http://placehold.it/150x250"> 
 
    <img src="http://placehold.it/340x115"> 
 
    <img src="http://placehold.it/800x550"> 
 
</div>

Quelle

2016-12-21 19:05:11

all den Bildern gezeigt wird, wird nicht mit einer Breite von 100% und Skalenhöhe, aber wenn die Bildhöhe ist höher als die Ernte max-height geben.

<div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> <div class="crop"> 
    <img src="http://placehold.it/350x150"> 
</div> 


.crop{ 
    position: relative; 
    overflow: hidden; 
    max-height: 200px; 
    display: block; 
    overflow: hidden; 
} 

.crop img{ 
    width:100% 
}

Quelle

2016-12-22 13:56:51

reagierende Bilder unterschiedlicher Breite mit einer gleichbleibenden Höhe

Antwort

Verwandte Themen