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

Question

Так что я просто создал сайт для своей средней школы и понял, что на этой странице много растянутых изображений www.eriesd.org / central / central2 / staff.php

Какой у вас лучший способ сделать изображения не такими растянутыми?

Я думал о добавлении div и добавлении фонового изображения с центром в центре или 50% 50%.Кроме того, на страницах о карьере и технологиях я заметил, что информационная страница не загружается в IE, но другие страницы загружаются нормально, у кого-нибудь когда-либо возникала такая проблема?вызов ajax-запроса, который загружает 1 из 3 макетов, который подключается к моей базе данных и получает информацию в зависимости от опции и местоположения.

Answer 1

Предполагая, что изображения загружаются с использованием некоторого типа php CMS, первое, что я бы сделал, - это правильно обработайте изображения в момент их загрузки: Помимо большого изображения, вам нужно будет создать миниатюру, которая соответствует размер, необходимый для этой страницы.

Я бы также рекомендовал добавить уведомление людям, загружающим изображение, о том, что это конкретное изображение должно иметь альбомный формат, поскольку именно это вы используете на странице.

Решения CSS были бы моим последним средством решения небольших проблем.

Редактировать: Кроме того, я бы серьезно пересмотрел публикацию всех таких адресов электронной почты и добавил бы нумерацию страниц, так как загрузка страницы теперь занимает много времени (особенно, когда все изображения намного больше). чем они вам нужны ...).

Answer 2

Они растянуты, потому что вы указали атрибуты width и height для тега <img>. Если фактическое изображение имеет разные размеры, можно увидеть, что в браузере нет других вариантов, кроме искажения изображения, чтобы оно соответствовало заданной высоте и ширине.

Только не указывайте height, или width, или оба, и изображения будут в порядке.

Answer 3

Чтобы макет выглядел красиво и ровно, единственное, что вы можете сделать, это либо растянуть его, как сейчас, либо, что еще лучше, немного обрезать изображения и изменить их размер. Вы, вероятно, можете сделать это программно для большинства изображений, просто предположите, что верхний центр - это то, где будет их голова. Однако у вас возникли проблемы с изображением по всему сайту.

Что касается страниц «Карьера и технология», они все еще загружаются (по крайней мере, в последней версии IE), если вы посмотрите на источник, но по какой-то причине они не отображаются, поэтому у вас есть некоторые Проблемы CSS или JavaScript с .post или .content. Иногда он даже появляется на секунду, а затем исчезает.

Answer 4

Я отвечу на ваш первый вопрос, касающийся изображений.Реальная проблема заключается в том, что ваши изображения не соответствуют размеру, который вы хотите, чтобы они занимали.Одним из них, который я проверял, было изображение 6MP (2848x2144) весом 1,5 МБ.Было еще много таких приблизительных размеров и размеров.Любое из этих изображений больше, чем вся страница, должно быть довольно много.Первый шаг - получение изображений того размера, который вам нужен.Ваша страница почти 19 МБ.Мало того, что большинство браузеров плохо выполняют масштабирование изображений, вы отправляете тонну дополнительных данных и очень медленно загружаете страницу для пользователей без очень быстрых подключений.Представьте себе пользователя с мобильным браузером, который ждет этого и просматривает свой тарифный план!Пользователю с DSL может потребоваться несколько минут;Для набора номера могут потребоваться часы.

Если вы загружаете их вручную, сначала измените их размер.Выясните ограничение размера, измените размер и обрежьте в первую очередь.Если вы используете CMS, найдите настройки, плагины или настройте их, чтобы сделать уменьшенную версию миниатюры и использовать ее.

Answer 5

Вы должны установить height только на img и добавить width:200px;text-align:center CSS к anchor, если вы хотите белую область с обеих сторон. Пропуск ширины приведет к уменьшению пробелов вокруг изображения.

<a class="image" style="width:200px;text-align:center">
    <img src="http://www.eriesd.org/central/central2/images/staff/kranking.jpg" alt="missing photo" height="112">
</a>

Answer 6

Если вы укажете только ширину, высота будет установлена ​​пропорционально и, таким образом, предотвратит растяжение ваших изображений.