Hoe lijn je een afbeelding verticaal uit in een div
Hoe kun je een afbeelding uitlijnen binnen een div
?
Example
In mijn voorbeeld, moet ik de <img>
verticaal centreren in de <div>
met class ="frame
":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame
's hoogte is vast en image's hoogte is onbekend. Ik kan nieuwe elementen toevoegen in .frame
als dat's de enige oplossing. Ik'probeer dit te doen op Internet Explorer 7 en later, WebKit, Gecko.
Zie de jsfiddle [hier][1].
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
1360
3
Achtergrond beeld oplossing
Ik heb het afbeeldingselement helemaal verwijderd en het als achtergrond van de div ingesteld met een klasse van
.frame
http://jsfiddle.net/URVKa/2/
Dit werkt in ieder geval prima op Internet Explorer 8, Firefox 6 en Chrome 13.
Ik heb het gecontroleerd, en deze oplossing werkt niet om afbeeldingen groter dan 25 pixels te verkleinen. Er is een eigenschap genaamd
background-size
die wel de grootte van het element instelt, maar het is CSS 3 wat in strijd zou zijn met Internet Explorer 7 eisen.Ik zou je aanraden om ofwel je browser prioriteiten te herzien en te ontwerpen voor de best beschikbare browsers, of wat server-side code te krijgen om de grootte van de afbeeldingen aan te passen als je'd deze oplossing zou willen gebruiken.
Je zou dit kunnen doen:
Demo
http://jsfiddle.net/DZ8vW/1
CSS
JavaScript
Dit werkt voor moderne browsers (2016 op het moment van bewerken) zoals te zien is in deze demo op codepen
Het is erg belangrijk dat je de afbeeldingen een klasse geeft of overerving gebruikt om de afbeeldingen die je gecentreerd wilt hebben te targetten. In dit voorbeeld gebruiken we
.frame img {}
zodat alleen afbeeldingen die omwikkeld zijn door een div met een class van.frame
gecentreerd worden.