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.