Kuinka kohdistaa kuva pystysuoraan divin sisällä

Question

Lisää

Arnaud Le Blanc

Kysymys

Kuinka kohdistaa kuva pystysuoraan divin sisällä

Miten voit kohdistaa kuvan sisältävän div:n sisällä?

Example

Esimerkissäni minun on keskitettävä <img> pystysuoraan <div> sisällä class ="frame":

<div class="frame" style="height: 25px;">
    <img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" />
</div>

.frame'n korkeus on kiinteä ja kuvan'korkeus on tuntematon. Voin lisätä uusia elementtejä .frame:iin, jos se on ainoa ratkaisu. Yritän tehdä tämän Internet Explorer 7:llä ja uudemmilla, WebKit, Gecko.

Katso jsfiddle [täällä][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="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=250 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=25 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=23 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=21 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=19 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=17 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

Benjamin Udink ten Cate · Answer 1 · 2011-09-04T13:17:02+00:00

Taustakuvaratkaisu

Poistin kuvaelementin kokonaan ja asetin sen divin taustaksi luokalla .frame.

Tämä toimii ainakin hyvin Internet Explorer 8:ssa, Firefox 6:ssa ja Chrome 13:ssa.

Tarkistin, eikä tämä ratkaisu toimi yli 25 pikselin korkuisten kuvien kutistamiseen. On olemassa ominaisuus nimeltä background-size, joka asettaa elementin koon, mutta se on CSS 3, mikä olisi ristiriidassa Internet Explorer 7:n vaatimusten kanssa.

Neuvoisin sinua joko tekemään selaimen prioriteetit uudelleen ja suunnittelemaan parhaat saatavilla olevat selaimet tai hankkimaan palvelinpuolen koodia kuvien koon muuttamiseksi, jos haluat käyttää tätä ratkaisua.

Joseph Marikle · Answer 2 · 2011-09-04T17:34:04+00:00

Joseph Marikle

T66 syyskuu 2011 в 5:34

Lisää

Voisit tehdä näin:

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

anglimasS · Answer 3 · 2011-09-01T17:29:55+00:00

Tämä toimii nykyaikaisilla selaimilla (2016 muokkaushetkellä), kuten tässä demo codepenissä näkyy

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

On erittäin tärkeää, että annat kuville joko luokan tai käytät periytymistä kohdistaaksesi kuvat, jotka haluat keskittää. Tässä esimerkissä käytimme .frame img {}, jotta vain kuvat, jotka on kääritty div:llä, jonka luokka on .frame, olisivat kohteena.