Как изменить размер изображения при выводе?

Question

[dev400]

Выводятся картинки товара, все они с разной высотой и шириной. Как сделать так, чтобы картинки автоматически как бы приближались, и становились 250х250? и при этом не искажались. Адаптивность тоже хорошо бы сохранить

Answer 1

[Школьник.]

<div><img src=картинка.пнг></div>

div {
overflow: hidden;
width: 250px;
height: 250px;
}
img {
height:100%;
}

Можно еще сделать её бэкграундом, но тогда поисковики не будут её видеть, а это плохо

Comments

[Денис Букреев]

а если ширина меньше высоты?

[Школьник.]

Денис Букреев: JS в помощь

[dev400]

а как быть с адаптивностью?

[Денис Букреев]

Владимир Мусихин: тогда это не решение

[Школьник.]

Андрей: css поддерживает media

[Школьник.]

Денис Букреев: это решение, js для красоты

Answer 2

[Денис Букреев]

Для таких целей надо не верстку приспосабливать под изображение, а изображение под дизайн.
Берем все картинки и обрезаем как надо
Ставим на загрузку изображений скрипт, чтоб новые картинки тоже обрезались.

Это самый лучший и самый логичный способ, хотя по началу он немного трудозатратен