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.

1
Dan 12 sierpień 2014, 11:46

5 odpowiedzi

Najlepsza odpowiedź

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>
0
roo2 12 sierpień 2014, 08:38

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/

1
Nicklas Nygren 12 sierpień 2014, 08:24

Spróbuj użyć atrybutu align za pomocą wartości middle w tagu img

 <img src="smth.gif" align="middle">
0
Cortwave 12 sierpień 2014, 07:56

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);
}
0
Niklas 12 sierpień 2014, 07:57

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.

0
Chris Spittles 12 sierpień 2014, 08:10