Расширяем <img>, но не слишком сильно
У меня есть веб-страница, на которой отображается изображение. Я бы хотел, чтобы изображение расширялось до своего контейнера (за вычетом некоторого поля и отступов), сохраняя при этом соотношение сторон, но при этом тег img не был больше изображения.
Вот пример:
<div class = "h-full w-full rounded-md border p-4 flex justify-center items-center">
<img class = "object-fit" :src = "image" aspect-ratio = "auto">
</div>
с этим как стилем:
.object-fit {
object-fit: contain;
max-width: 100%;
max-height: 100%;
height:100%;
width:100%;
display:block;
background-color: red;
}
К вашему сведению: красный цвет фона нужен только для того, чтобы показать размер тега img.
В результате мне выдает следующее:
Мне нужен тот же результат, но без красного фона, потому что мне нужно точное положение моих кликов на изображении.
Поэтому мне нужно, чтобы тег img был как можно большим, но при этом сохранял контур изображения без пробелов. И это без обрезки изображения (по размеру объекта: обложка мне не подошла) У тебя есть решение ?
@t.niese да, я бы хотел. Удаление «ширина: 100%; высота: 100%» решило бы мою проблему, но иногда изображения были меньшего размера.
Вместо этого вы можете сделать изображение фоном и поиграть с background-size. Документы MDN: размер фона
@PeterPointer Или вы могли бы использовать object-fit и object-position и сделать то же самое напрямую с тегом изображения. Возможно, лучше центрировать изображение, используя grid, а затем вместо этого присвоить ему max-width и max-height, чтобы уменьшить масштаб изображения.
Ответы 2
Я не знаю, правильно ли я понимаю вашу цель, но добавление flex-grow:1 в класс .object-fit приведет к созданию изображения, которое соответствует родительскому контейнеру, сохраняя при этом пропорции.
.object-fit {
object-fit: contain;
width: 100%;
height: auto;
width: auto;
flex-grow: 1;
background-color: red; /* For visibility */
}
Поэтому я хотел, чтобы изображение соответствовало родительскому контейнеру, сохраняя при этом пропорции (как вы сказали). Но я также хочу, чтобы элемент img уменьшился до размера изображения (отсюда и красный фон, если я его вижу, это неправильно)
Ну мне удалось найти решение.
Моя проблема заключалась в том, что с этим условием: img {width:100%; max-width:100%; max-height:100%;}
Если изображение сначала достигает вертикального предела div, элемент img все равно будет расширяться по горизонтали (фон, который мы видим на изображении). И то же самое происходит и наоборот.
Поэтому мое решение — выбрать width:100% или height:100% в зависимости от размера изображения и размера div.
работая над Vue, я поставил двух прослушивателей (один, если размер изображения изменился, другой, если размер окна изменился), и они вызвали одну и ту же функцию.
Если мы возьмем это изображение, где синие прямоугольники — это контейнер, а красный прямоугольник — изображения
В случае слева нам нужно установить: width:100%; height:auto и в правом случае: height:100; width:auto.
Не стесняйтесь отправить сообщение, чтобы узнать, как я это сделал, но я использовал для этого Vue3Js и piniaStore, поэтому не думаю, что это будет полезно.
Хотите, чтобы
imgбыл больше, чем его фактический размер, если контейнер больше?