2016-12-31 3 views
0

http://www.blessedbythebestbarbershop.com/photos.html
Нижняя правая картинка по какой-то причине по-прежнему меняется на другую высоту, и им не понятно почему. Размер изображения такой же, как и у другого. Может ли кто-нибудь сказать, почему он это делает?Почему мой img-отзывчивый класс не масштабируется правильно?

link to source

+0

Мы должны видеть ваш исходный код (HTML, CSS), а не только ссылку на ваш сайт. – Martin

+1

Некоторые из них - 720x960, а некоторые - 528x960. – pol

ответ

1

Добавление к тому Syden says

В настоящее время первые изображения: 720px × 960px (в масштабе 350 пикселей × 467px)
В настоящее время 6-го изображения: 528px × 960px (в масштабе 350 пикселей × 636px)

Это 6-ое изображение имеет другое отношение размеров к другим (с 11 : 20, а не 15 : 20).

Ваши изображения масштабируются до заданной ширины (350px), поэтому высота изображения пропорциональна Ширина масштабирования. Чтобы исправить это, вам необходимо сохранить пропорции изображения одинаково, поэтому, когда они имеют одинаковую ширину, все они будут одинаковой высоты.

Существуют различные решения, такие как принудительная CSS-обрезка изображения и установка максимальной высоты, но вы, вероятно, не захотите этого. Гораздо проще просто изменить размер 6-го изображения в соответствии с другими.

1

Поскольку некоторые изображения 720 х 960 пикселей, а некоторые 528 х 960 пикселей.

Если у вас есть фотокамера, вы можете разместить их в статическом размере.

Смежные вопросы