.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
Edited question 11 júl 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Popular videos
« Predchádzajúci
Ďalšie »
This question has 1 odpoveď in English, to read them log in to your account.

Riešenie obrázku na pozadí

Úplne som odstránil prvok obrázka a nastavil som ho ako pozadie div s triedou .frame

Toto funguje dobre aspoň v prehliadačoch Internet Explorer 8, Firefox 6 a Chrome  13.

Skontroloval som to a toto riešenie nebude fungovať na zmenšenie obrázkov väčších ako 25 pixelov na výšku. Existuje vlastnosť s názvom background-size, ktorá síce nastavuje veľkosť prvku, ale je to CSS 3, čo by bolo v rozpore s požiadavkami Internet Explorer 7.

Poradil by som vám, aby ste buď prepracovali priority prehliadača a navrhli dizajn pre najlepšie dostupné prehliadače, alebo si zaobstarali nejaký kód na strane servera na zmenu veľkosti obrázkov, ak by ste chceli použiť toto riešenie.

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

Mohli by ste to urobiť takto:

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

Funguje to aj v moderných prehliadačoch (v čase úpravy 2016), ako ukazuje toto demo na codepen

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

Je veľmi dôležité, aby ste buď dali obrázkom triedu, alebo použili dedičnosť na zameranie obrázkov, ktoré potrebujete vycentrovať. V tomto príklade sme použili .frame img {}, aby sa zamerali len obrázky obalené divom s triedou .frame.