Обрезать изображения в CSS без установки размеров

Я знаю, что object-fit: cover; - отличный способ обрезать изображения в css, но можно ли использовать его таким же образом, без указания размеров? Вместо того, чтобы просто заполнить его шириной родительского элемента?

css sass

03.05.2018 22:53

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

background-size: cover; должен помочь.

Только в целях украшения. Если изображение не является декоративным, оно не должно отображаться в качестве фона.

— 03.05.2018 23:20

Можно ли использовать это без установки изображения в качестве фонового изображения?

— 04.05.2018 00:21

Я так не думаю.

— 04.05.2018 00:30

03.05.2018 23:11

Ответ принят как подходящий

Вы также можете использовать object-fit: cover;. Только не забудьте указать width: 100% и height: 100% для образа. Чтобы это решение работало, родительский элемент должен иметь определенную высоту, иначе изображение будет отображаться как есть.

<p>Parent element with no dimensions (default width to 100%): will maintain image aspect ratio (all image is visible).</p>
<div>
  <img src = "https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style = "object-fit: cover; width: 100%; height: 100%;">
</div>
<p>Parent element with specified dimensions: image will cover the area.</p>
<div style = "width: 300px; height: 100px;">
  <img src = "https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style = "object-fit: cover; width: 100%; height: 100%;">
</div>

04.05.2018 03:54

Другие вопросы по теме

Структура проекта Flask для рабочего процесса на основе grunt

Позиция в процентах фона Sass

Возможно ли использование градиентов с цветовой картой scss?

Импортировать переменные sass в компонент gatsby

Переменная SCSS для переключения фонового URL с пути на ASSET_URL

Ограничьте объем сторонних CSS с помощью sass

Преобразуйте меньше "для цикла" в scss "для цикла"

Вывести расчет?

Как поставить число дроби перед единицей в SASS

: корневые переменные CSS не установлены для стилей элементов

Обрезать изображения в CSS без установки размеров

Ответы 2

Другие вопросы по теме

Похожие вопросы