.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.

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";
})

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.