Как растянуть изображение на 100%, чтобы на телефоне корректно отображалось?

Question

[AshimNikoros]

Здравствуйте, не могу понять, как растянуть картинку, чтобы не возникали проблемы с ней при уменьшении? Перепробовал все возможные background-size: cover в CSS, не помогает. Попробовал ради интереса в теге img растянуть, тоже самое. Помогите)

Comments

[Кирилл Никитин]

Видимо, это и есть ширина родителя. А можно код не картинкой?

[AshimNikoros]

Кирилл Никитин, вам нужен CSS или HTML?

[Кирилл Никитин]

AshimNikoros, просто используйте одну из песочниц, jsfiddle например.

[AshimNikoros]

Кирилл Никитин, надеюсь, всё правильно сделал: https://jsfiddle.net/6srfgde3/#&togetherjs=NTdPHEDfIO

[Кирилл Никитин]

AshimNikoros, так у вас вообще не прописано пока ничего. Картинка просто берёт свой фактический размер.

[AshimNikoros]

Кирилл Никитин, если я открою это всё дело в браузере, и буду проверять размер в браузере, сразу появится эта проблема. В песочнице это не покажет. Всё нормально выглядит до тех пор, пока я не начинаю уменьшать изображение в браузере.

[Кирилл Никитин]

AshimNikoros, возьмите какую-нибудь готовую сетку и используйте её, это будет проще всего. Из бутстрапа например.

[Ankhena]

AshimNikoros, 100% по высоте или ширине?

Как всё должно выглядеть на мобилке? Нарисуйте.

Понимаете, геометрию и пропорции никто не отменит.
Простыми словами прямоугольная картинка может занимать квадратную область
- либо с нарушением пропорций
- либо что-то обрежется
- либо останутся поля.

Можно заменять картинку при различных @media, например, для вертикальной и горизонтальной ориентации окна, а также отдельно для мобилок, планшетов, десктопов.

[AshimNikoros]

Ankhena, 100% по-ширине. Всё оказалось намного проще, я не указал минимальную ширину body, из-за этого обрезалась картинка при уменьшении для мобилок. Всем благодарю за объяснения!)

Answer 1

[AshimNikoros]

Ребята, спасибо вам за уделенное время. Всё оказалось намного проще, я не указал минимальную ширину body, из-за этого обрезалась картинка. Всем благодарю за объяснения!)