img div

Ответ от 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/5 от картинки. И это все из за того, что если на картинке будут лица, чтоб они остались в кадре. (в данном примере по вертикали центруется, картинку специально выбирал с девушкой в центре)

Ответ от 3 ответа[гуру]

Ответ от 3 ответа[гуру]