Czy istnieje odpowiednik img (javascript) w rozmiarze tła: okładka?

Question

Pracuję nad responsywnym projektem, który prezentuje zdjęcia w siatce. Same zdjęcia mogą mieć różne proporcje i rozmiary. Co więcej, komórki siatki, w których są umieszczone, również nie mają stałej szerokości, są skalowane podczas zmiany rozmiaru przeglądarki. Co więcej, każda komórka siatki, choć dynamiczna na szerokość i wysokość, ma taki sam rozmiar, niezależnie od obrazu w środku.

Aby prawidłowo pokazać zdjęcia w tej bardzo dynamicznej sytuacji, znalazłem działający przepis: każde zdjęcie to w zasadzie element div z obrazem ustawionym jako obraz tła. Aby poprawnie skalować nieznaną szerokość/wysokość obrazu wewnątrz siatki o dynamicznym rozmiarze, korzystam z funkcji tło-rozmiar: okładka CSS3.

Efekt końcowy jest fantastyczny, robi dokładnie to, co chcę pod względem interfejsu i wyświetlacza. Mimo to nie jestem zadowolony z ograniczonej dostępności tego rozwiązania: nie jest ono przyjazne SEO i nie jest przyjazne dla wtyczek (pomyśl o wtyczkach społecznościowych). Dlatego próbuję odtworzyć sytuację, w której pracuję, ale tym razem używając dobrych starych tagów img zamiast CSS.

Wiem, że są IE8 i poniżej polyfills dla wielkości tła: okładka, ale nie szukam, szukam rozwiązania opartego na znacznikach img. Znalazłem również artykuły wykorzystujące techniki bezwzględnego pozycjonowania, a także właściwość klipu CSS, ale pamiętaj, że mój projekt nie ma absolutnej wielkości.

Domyślam się, że szukam javascriptowego rutyny, który ma logikę wielkości tła: pokrycie dynamicznego rozmiaru, w sytuacji, gdy zarówno źródło (wymiary obrazu) jak i cel (pole wyświetlania) są dynamiczne w rozmiar.

Czy istnieje taki odpowiednik javascript dla tła: cover, który działa na znacznikach img?

Answer 1

Wierzę, że istnieją dwie rzeczy, które chcesz zrobić:

1. mieć obraz wypełnić okno
2. Upewnij się, że obraz jest wyśrodkowany w pionie i poziomie.

Problem polega na tym, że (jeśli chcesz zachować proporcje obrazu), musisz wyśrodkować go pionowo i poziomo w zależności od rozmiaru obrazu i przeglądarki.

Możesz wykonać czyste rozwiązanie CSS, używając kombinacji display:table i margin:0 auto wraz z inteligentnymi ustawieniami wysokości/szerokości.

Zobacz skrzypce: http://jsfiddle.net/5yVYM/3/

.wrapper { 
    display:table; 
    text-align: center; 
    margin:0 auto; 
    width:100%; 
    height:100%; 
} 

.wrapper div { 
    display:table-cell; 
    vertical-align:middle; 
    max-width:100%; 
    max-height:100%; 
} 

img { 
    width:100%; 
    height:auto; 
} 

Answer 2

To jest stary, ale ja niedawno znalazł nowego rozwiązania.

Zamiast img chcesz wyświetlić obraz tła div, tworzyć obraz:

<div> 
    <img src="mypic.jpg"/> 
</div> 
<style> 
    div { 
     width:200px; 
     height:200px; 
    } 
    img { 
     box-sizing:border-box; 
     width:100%; 
     height:100%; 
     background: url(mypic.jpg) no-repeat center center; 
     background-size:cover; 
     padding:50%; 
    } 
</style> 

Ustaw zawierającego div być szerokość/wysokość chcesz obraz. Następnie umieść obraz w środku jako 100% szerokość/wysokość i ustaw src na żądany obraz. Ustaw także żądany plik img jako obraz tła pliku img. Ustaw rozmiar tła na pokrycie, a dopełnienie na 50%.

Sztuką jest wyściółka o wartości 50%.Img szerokość/wysokość jest stała, więc w miarę zwiększania wypełnienia obraz staje się coraz mniejszy. 50% to dokładnie to, ile potrzeba, aby go ukryć, a teraz widzisz tylko obraz tła obrazu, który jest wyświetlany, ale nadal jest dostępny!

http://jsfiddle.net/t72xgbw0/

Answer 3

Myślenie o dostępie i SEO, stworzyłem rozwiązanie bardzo podobny problem przy użyciu jQuery, nie powielać logiki pokrywy tła, to sprawia, że ​​korzystanie z niego.

Obrazy w rzeczywistości stają się rolą kontenera z tłem, a okładka tła zostaje dodana programowo.

$imagesContainer.find('img').each(function(i, elem){ 
    $(elem).css({ 
    backgroundSize : 'cover', 
    backgroundImage : 'url("' + $(elem).attr('src') + '")', 
    backgroundPosition : 'center', 
    display : 'block', 
    height : '100%', // Or any size needed. 
    width : '100%' 
    }); 
    $(elem).removeAttr('src'); 
}); 

Answer 4

znalazłem dobry sposób na pokrycie pojemnik z obrazu za pomocą CSS i JavaScript:

HTML:

<div class="container"> 
    <img src="image.jpg"/> 
</div> 

CSS:

img { 
    position: absolute; 
    min-width: 100%; // To cover container 
    min-height: 100%; // To cover container 
    top: 50%;   // To move image corner to center of container 
    left: 50%;   // To move image corner to center of container 
} 

Javascript:

$('img').css({ 
    'margin-top': -$('img').height()/2, // To move to center of image 
    'margin-left': -$('img').width()/2 // To move to center of image 
}); 

Upewnij się, że uruchomiłeś javascript po wczytaniu obrazu.