У меня есть div 48x48 и внутри него есть элемент img, я хочу вписать его в div без потери части, при этом соотношение сохраняется, достижимо ли это с помощью html и css?
К сожалению, Макс-ширина + Макс-высота не полностью покрывает мои задачи... Поэтому я нашел другое решение:
*Чтобы сохранить пропорции изображения** при масштабировании вы также можете использовать объект "в форме" с помощью CSS3 propperty.
Полезная статья: контрольные соотношения сторон изображения с помощью CSS3
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
Плохие новости: т. е. не поддерживается (можно использовать)
Вам понадобится JavaScript для предотвращения обрезки, если вы не знаете размер изображения на момент написания css.
<div id="container">
<img src="something.jpg" alt="" />
</div>
<script type="text/javascript">
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if(img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
</script>
#container {
width: 48px;
height: 48px;
}
#container img {
width: 100%;
}
Если вы используете библиотеку JavaScript, вы можете воспользоваться ее преимуществами.
Используя только CSS:
div > img {
width: auto;
height : auto;
max-height: 100%;
max-width: 100%;
}
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Это заставит изображение расшириться и заполнить своего родителя, размер которого задан в div
CSS.
Я был иметь много проблем, чтобы это сделать, каждое решение, которое я нашел я'т, кажется, работают.
Я понял, что мне пришлось установить дисплей див, чтобы продемонстрировать, поэтому в основном это мои CSS:
div{
display: flex;
}
div img{
max-height: 100%;
max-width: 100%;
}
Попробуйте в CSS:
img {
object-fit: cover;
height: 48px;
}
Для меня в CSS работал (проверено в Chrome, Firefox и Safari).
Есть несколько вещей, которые работают вместе:
Макс-высота: 100%;
, Макс-ширина: 100%; " и " высота: авто;
, `ширина: авто; сделать в img данные в зависимости от того, что размер первой достигает 100%, при этом сохраняя пропорцииверхняя часть: 50%; " и " слева: 50%;
- центра в верхний левый угол IMG в контейнерУсс:
.container {
height: 48px;
width: 48px;
position: relative;
}
.container > img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Установка фотографии в качестве фонового изображения даст нам больший контроль над размером и размещением, оставляя тег img, чтобы служить другой цели...
Ниже, если мы хотим, чтобы div, чтобы быть таким же соотношением сторон, как на фото, то заполнителями.png-это небольшое прозрачное изображение с соотношением сторон как photo.jpg. Если фото квадратное, это'ы в 1 пиксель х 1 пиксель заполнитель, если фото видео миниатюр, это'ы 16х9 заполнителя и т. д.
Конкретные на вопрос, использовать 1х1 заполнитель для поддержания див'отношение площади S, с фоновое изображение фон-размер сохранить фото'отношение сигнал аспекте.
Я использовал фон-позиции: центр;` поэтому фото будет по центру в div. (Выравнивание фото по вертикали по центру или внизу будет получить уродливые с фото в тег img.)
div {
background: url(photo.jpg) center center no-repeat;
background-size: contain;
width: 48px; // or a % in responsive layout
}
img {
width: 100%;
}
<div><img src="placeholder.png"/></div>
Чтобы избежать лишних HTTP-запрос, преобразования изображения заполнитель данные: URL-адрес.
<img src="data:image/png;base64,..."/>
вы можете использовать класс назальный ИМГ-жидкостью; для новой версии я.е прихлоп В4.
и можете использовать класс "и в img-отзывчивый и" для более старых версий, как начальной загрузки В3.
Использование:-
ИМГ тег :-
класс=назальный ИМГ-жидкость;
НИЦ=" и..." по
Здесь'ы все JavaScript подход. Он масштабирует изображение постепенно вниз, пока она не подходит правильно. Вы сами выбираете, сколько уменьшить его каждый раз, когда он терпит неудачу. В этом примере сокращается на 10% каждый раз, когда он терпит неудачу:
let fit = function (el, w, h, percentage, step)
{
let newH = h;
let newW = w;
// fail safe
if (percentage < 0 || step < 0) return { h: h, w: w };
if (h > w)
{
newH = el.height() * percentage;
newW = (w / h) * newH;
if (newW > el.width())
{
return fit(el, w, h, percentage - step, step);
}
}
else
{
newW = el.width() * percentage;
newH = (h / w) * newW;
if (newH > el.height())
{
return fit(el, w, h, percentage - step, step);
}
}
return { h: newH, w: newW };
};
img.bind('load', function ()
{
let h = img.height();
let w = img.width();
let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);
img.width(newFit.w);
img.height(newFit.h);
});
Не стесняйтесь копировать и вставлять напрямую.