Я работаю с загруженными пользователем (или связанными, чтобы указать c) изображениями в сценарии, где пользователи могут дополнительно указать ширину или высоту своего изображения. Мне все еще нужно убедиться, что я сохранил соотношение в окончательном выводе, поэтому я определяю max-height и max-width, и я использую object-fit:scale-down, чтобы избежать сжатия.
Теперь я знаю, что в большинстве ситуаций лучше просто определить max-width OR max-height, а не оба, а в некоторых других лучше использовать object-fit:cover со 100% от width и определить только height. Это не поможет мне в моем конкретном сценарии , поэтому мне нужно go с object-fit:scale-down. Это то, что у меня есть (упрощено):
HTML:
<div>
<img src="https://www.kidsmathgamesonline.com/images/pictures/shapes/circle.jpg" class="uploaded_picture" style="width: 700px">
</div>
Обратите внимание, что ширина 700 пикселей выше определяется пользователем, который загрузил pi c, поэтому Я не могу изменить эту часть. Тем не менее, его масштаб уменьшается очень хорошо, потому что ...
CSS:
.uploaded_picture {
max-width: 500px;
max-height: 200px;
object-fit: scale-down;
}
Итак, это в основном работает нормально, но есть побочный эффект: изображение остается пустым. пространство для области, которая в противном случае была бы занята им, но не занята из-за масштабирования. Изображение ниже представляет это. Белый фон и круг - это фактическое уменьшенное изображение. Наложение blui sh - это все занимаемое пространство (500 пикселей):
Это не отступы или поля, а пространство, занимаемое уменьшенное изображение:
Мой вопрос прост, даже если решение может и не быть: могу ли я как-то избавиться от этого неиспользованного пространство с обеих сторон, чтобы его можно было занять другими элементами?