Próbuję wyśrodkować obraz, załączyłem JSFiddle, aby pokazać wynik tego, czego chcę, jedyną różnicą byłoby to, że obraz zostanie umieszczony w HTML, a nie kod CSS.
http://jsfiddle.net/6y2qjxm0/3/
Oto CSS, używam na skrzypce i już wziąłem adres URL obrazu.
width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I wreszcie oto HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
Brak tego, czy ktoś zna lepszy sposób na to?
Musi być wyśrodkowany i musi wynosić 100% szerokości i 100% wysokości.
Dzięki
Aktualizacja: Obraz musi pozostać w proporcji jak skrzypce.
5 odpowiedzi
background-size: cover; to najlepszy zakład, z obsługą IE9 +. Uzyskiwanie img Aby zakryć stronę bez zniekształcania tylko działa tylko wtedy, gdy znasz jego rozmiar lub chcesz użyć JavaScript.
Dlaczego musisz użyć img? Czy dlatego, że chcesz, aby SRC można dodać dynamicznie? W takim przypadku należy użyć stylu inline.
<div style="background-image:{{dynamicImage}}"></div>
Zaktualizowano To rozwiązanie jest niezależne od wymiarów obrazu, oprócz tego, że musi być większe niż jego wysokość. Wykorzystuje pozycję CSS, aby ustawić obraz w .full-screen, aby mieć pełną wysokość, utrzymywać proporcje i 50% negatywne przesunięcie poziome (wyśrodkowane).
HTML:
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS:
body, html {
margin: 0;
height: 100%;
overflow-x: hidden;
}
.full-screen {
position: relative;
height: 100%;
}
.full-screen img {
position: absolute;
left: 0;
height: 100%;
left: -50%;
}
Zaktualizowano skrzypce: http://jsfiddle.net/5e6btwa2/1/
Spróbuj użyć atrybutu align za pomocą wartości middle w tagu img
<img src="smth.gif" align="middle">
Jeśli chcesz tego samego zachowania, co miałeś z obrazem jako tło, możesz to zrobić (zależy od Metoda transformacji CSS3):
http://jsfiddle.net/6y2qjxm0/6/
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150">
</div>
CSS
* {
margin:0;
padding:0;
position: relative;
}
html {
width: 100%;
height: 100%;
background-size: cover;
position: relative;
overflow-y: scroll;
}
body {
width: 100%;
height: 100%;
margin-left:auto;
margin-right:auto;
background: inherit;
/* overflow: hidden; enable to disable scrolling */
}
.full-screen {
width:100%;
height:100%;
overflow: hidden;
}
.full-screen img {
min-width: 100%;
min-height: 100%;
left: 50%;
transform: translate(-50%,0);
}
Spróbuj tego, działa w IE8 + i prawie każdej innej przeglądarce:
HTML
<div class="full-screen">
<img src="http://placehold.it/350x150" />
</div>
CSS
.full-screen {
position: fixed;
top: -50%; /* this will center the image vertically */
left: -50%; /* this will center the image horizontally*/
width: 200%;
height: 200%;
}
.full-screen img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Próbny
Dla innych sposobów spojrzeć na Ten artykuł na trikach CSS Chris Coyier. Powyższe CSS jest używane w technice # 2 w jego przykładach.