Img cover
Автор Cool Guy задал вопрос в разделе Веб-дизайн
Как сделать так, чтобы изображение автоматически обрезалось под размеры div'a и соответственно находилось в нём. и получил лучший ответ
Ответ от Imobilazer[гуру]
Ответ от Labudinets[гуру]
Именно обрезалось или изменялись размеры?
Именно обрезалось или изменялись размеры?
Ответ от Ив Х-ов[гуру]
Ответ от - -[гуру]
Есть несколько вариантов:
1) Изображение - фон блока - тогда вам нужно использовать css для работы с фоном:
background-size: cover - масштабирование фона под контейнер - подробнее почитайте в онлайн учебниках
2) Изображение - картинка внутри блока и вам нужно подогнать размеры картинки под блок:
div {
width: 300px;
height: 200px;
overflow: hidden; /* Обрезка картинки, если она выходит за пределы блока */
}
далее подстройка по ширине - ширина изображения будет равна ширине блока, высота подставится автоматом, с соблюдением пропорций
div img {
width: 100%;
height: auto;
}
или подстройка по высоте - высота изображения будет равна высоте блока, ширина подставится автоматом, с соблюдением пропорций
div img {
width: auto;
height: 100%;
}
3) Изображение - картинка внутри блока - нужно чтобы у картинки были исходные размеры, но при этом она была в блоке и была в нем по центру - нечто похожее у вас и нарисовано - тот же overflow:hidden - для блока что и в пункте 2) - но придется писать скрипт для центровки картинки внутри.
Есть несколько вариантов:
1) Изображение - фон блока - тогда вам нужно использовать css для работы с фоном:
background-size: cover - масштабирование фона под контейнер - подробнее почитайте в онлайн учебниках
2) Изображение - картинка внутри блока и вам нужно подогнать размеры картинки под блок:
div {
width: 300px;
height: 200px;
overflow: hidden; /* Обрезка картинки, если она выходит за пределы блока */
}
далее подстройка по ширине - ширина изображения будет равна ширине блока, высота подставится автоматом, с соблюдением пропорций
div img {
width: 100%;
height: auto;
}
или подстройка по высоте - высота изображения будет равна высоте блока, ширина подставится автоматом, с соблюдением пропорций
div img {
width: auto;
height: 100%;
}
3) Изображение - картинка внутри блока - нужно чтобы у картинки были исходные размеры, но при этом она была в блоке и была в нем по центру - нечто похожее у вас и нарисовано - тот же overflow:hidden - для блока что и в пункте 2) - но придется писать скрипт для центровки картинки внутри.
Ответ от МАСТЕР[гуру]
Наилучший вариант ссылка
картинка центруется и по вертикали и по горизонтали, можно задать режим сжатия, лишнее обрезается.
Помудрив, можно сделать, чтоб картинка умещалась по минимальной стороне, лишнее обрезалось.
Я несколько лет назад делал целый расчет, как правильно обрезать картинки, скачивал с инета сотни случайных картинок, чтоб полноценно проанализировать. Пришел к выводу, что по горизонтали надо центровать (что естесственно, и не анализировалось), а по вертикали сверху обрезать 1/5 от картинки. И это все из за того, что если на картинке будут лица, чтоб они остались в кадре. (в данном примере по вертикали центруется, картинку специально выбирал с девушкой в центре)
Наилучший вариант ссылка
картинка центруется и по вертикали и по горизонтали, можно задать режим сжатия, лишнее обрезается.
Помудрив, можно сделать, чтоб картинка умещалась по минимальной стороне, лишнее обрезалось.
Я несколько лет назад делал целый расчет, как правильно обрезать картинки, скачивал с инета сотни случайных картинок, чтоб полноценно проанализировать. Пришел к выводу, что по горизонтали надо центровать (что естесственно, и не анализировалось), а по вертикали сверху обрезать 1/5 от картинки. И это все из за того, что если на картинке будут лица, чтоб они остались в кадре. (в данном примере по вертикали центруется, картинку специально выбирал с девушкой в центре)
Ответ от 3 ответа[гуру]
Привет! Вот подборка тем с похожими вопросами и ответами на Ваш вопрос: Как сделать так, чтобы изображение автоматически обрезалось под размеры div'a и соответственно находилось в нём.