.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>
Peter Mortensen
Peter Mortensen
Bewerkte vraag 11de3 juli 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Deze vraag heeft 1 antwoord in het Engels, om ze te lezen inloggen op uw account.

Achtergrond beeld oplossing

Ik heb het afbeeldingselement helemaal verwijderd en het als achtergrond van de div ingesteld met een klasse van .frame

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.

Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev

Je zou dit kunnen doen:

Demo

/embedded/result,js,html,css/">

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 
60px; border:
px solid red; text-align: center; margin:
em 0; position: relative; /* Changes here... */ } img { background: #3A6F9A; max-height: 25px; max-width:
60px; top: 50%; /* Here.. */ left: 50%; /* Here... */ position: absolute; /* And here */ }


JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
Do you have a question? Add it on the site and get an answer instantly
en.kzen.dev

Dit werkt voor moderne browsers (2016 op het moment van bewerken) zoals te zien is in deze demo op codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

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.