.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
Redigeeritud küsimus T33 juuli 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Populaarsed videod
« Eelmine
Järgmine »
See küsimus on 1 vastus inglise keeles, nende lugemiseks logi sisse oma kontole.

Taustapildi lahendus

Eemaldasin pildielemendi täielikult ja seadsin selle div-i taustaks klassiga .frame.

See töötab vähemalt Internet Explorer 8, Firefox 6 ja Chrome  13 korralikult.

Ma kontrollisin, ja see lahendus ei tööta üle 25 piksli kõrguste piltide kahandamiseks. On olemas omadus nimega background-size, mis küll määrab elemendi suuruse, kuid see on CSS 3, mis oleks vastuolus Internet Explorer 7 nõuetega.

Ma soovitaksin teil kas muuta oma brauseriprioriteedid ja kujundada parimad olemasolevad brauserid või saada serveripoolset koodi piltide suuruse muutmiseks, kui soovite seda lahendust kasutada.

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

Sa võid teha seda:

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

See töötab kaasaegsete brauserite puhul (2016 redigeerimise ajal), nagu on näidatud siin demo koodepenil

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

On väga oluline, et te annaksite piltidele kas klassi või kasutaksite pärimist, et suunata pilte, mida on vaja tsentreerida. Selles näites kasutasime .frame img {}, nii et ainult div-ga ümbritsetud pildid, mille klassiks on .frame, oleksid suunatud.