.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
Edytowane pytanie 11. lipca 2019 в 7:00
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.

Rozwiązanie obrazu tła

Usunąłem całkowicie element obrazu i ustawiłem go jako tło div z klasą .frame.

To przynajmniej działa dobrze na Internet Explorer 8, Firefox 6 i Chrome 13.

Sprawdziłem, i to rozwiązanie nie zadziała do zmniejszania obrazów większych niż 25 pikseli wysokości. Istnieje właściwość o nazwie background-size, która ustawia rozmiar elementu, ale jest to CSS 3, co kolidowałoby z wymaganiami Internet Explorer 7.

Radziłbym Ci albo przerobić priorytety przeglądarek i projektować dla najlepszych dostępnych przeglądarek, albo zdobyć jakiś kod po stronie serwera do zmiany rozmiaru obrazów, jeśli chciałbyś użyć tego rozwiązania.

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

Możesz to zrobić:

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

To działa dla nowoczesnych przeglądarek (2016 w czasie edycji) jak pokazano w tym 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;
}

Bardzo ważne jest, abyś albo nadał obrazom klasę, albo użył dziedziczenia, aby skierować obrazy, które potrzebujesz wyśrodkowane. W tym przykładzie użyliśmy .frame img {}, aby tylko obrazki zawinięte przez div z klasą .frame były targetowane.