Obecnie pracuję na mobilnej stronie docelowej dla firmy. To naprawdę podstawowy układ, ale poniżej nagłówka znajduje się obraz produktu, który zawsze będzie miał 100% szerokości (projekt pokazuje, że zawsze przechodzi od krawędzi do krawędzi). W zależności od szerokości ekranu wysokość obrazu będzie oczywiście odpowiednio dostosowana. Początkowo robiłem to z img (o szerokości CSS 100%) i działało świetnie, ale zdałem sobie sprawę, że chciałbym użyć zapytań o media do obsługi różnych obrazów w oparciu o różne rozdzielczości - powiedzmy małe, średnie i na przykład duża wersja tego samego obrazu. Wiem, że nie możesz zmienić img src za pomocą CSS, więc pomyślałem, że powinienem użyć tła CSS dla obrazu, w przeciwieństwie do tagu img w HTML.

Wydaje mi się, że nie działa poprawnie, ponieważ div z obrazem tła wymaga zarówno szerokości, jak i wysokości, aby pokazać tło. Mogę oczywiście użyć „szerokość: 100%”, ale czego użyć do wysokości? Mogę umieścić losową stałą wysokość, taką jak 150px, a potem widzę najwyższy 150px obrazu, ale to nie jest rozwiązanie, ponieważ nie ma stałej wysokości. Miałem grę i odkryłem, że gdy jest wysokość (testowana z 150px), mogę użyć 'background-size: 100%', aby poprawnie dopasować obraz w div. Mogę użyć nowszego CSS3 dla tego projektu, ponieważ jest on skierowany wyłącznie do urządzeń mobilnych.

Dodałem szorstki przykład poniżej. Proszę wybaczyć style inline, ale chciałem podać podstawowy przykład, aby spróbować wyjaśnić moje pytanie.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Czy może muszę podać pojemnikowi div wysokość procentową na podstawie całej strony, czy patrzę na to całkowicie źle?

Czy uważasz, że tła CSS to najlepszy sposób na to? Może istnieje technika, która obsługuje różne znaczniki img na podstawie szerokości urządzenia / ekranu. Ogólny pomysł polega na tym, że szablon strony docelowej będzie używany wielokrotnie z różnymi obrazami produktów, więc muszę się upewnić, że opracuję to w najlepszy możliwy sposób.

Przepraszam, że jest to trochę długo rozwlekłe, ale wracam z tego projektu do następnego, więc chciałbym zrobić to małe. Z góry dziękuję za poświęcony czas, to bardzo doceniane. pozdrowienia