Измените размер фотографии в HTML и сохраните соотношение сторон
Я хотел бы отобразить фотографии, которые я загружаю (на мой drupal сайт), и я хотел бы сделать фотографии smallers, но использующий heigh=100 не соблюдает соотношение сторон. Все, что я хочу сделать, делают фото масштабирование меньшим.
6 ответов
Если Вы только указываете ширину, или высоту, но не обоих, Вы действительно сохраняете соотношение сторон, таким образом, Вы, вероятно, случайно наследовали a width=100% или что-то. Осмотрите элемент с Firebug или инспектором Safari.
Если Вы волнуетесь по поводу того, что произойдет с фотографией, которая не является 4:3 или 3:4, такие как пользователь отправил фотографии обзоров, то Вы могли бы считать обоих a max-height и max-width, или overflow: none; на содержании блока.
-
1, Как он определил бы, какой указать, не ли размеры изображений универсальны? – i-g 10.10.2009, 03:33
Можно выполнить это с таблицей стилей. Во-первых, определите следующий стиль:
.thumb {
max-width: 100px;
max-height: 100px;
width: expression(this.width > 100 ? "100px" : true);
height: expression(this.height > 100 ? "100px" : true);
}
Затем добавьте этот стиль к своим тегам изображения, как так:
<img class="thumb" ...>
Не включайте height и width элементы на этот раз.
Первая половина того стиля для браузеров, которые поддерживают max-width и max-height свойства - Chrome, Firefox, Opera и Safari. Вторая половина является взломом для IE, который не делает.
Источник: Image Max Width & Height
Спасибо за обратную связь, Diago.
-
1Предоставьте больше информации затем просто ссылка. SU является каноническим источником информации и если ссылка истечет, то этот ответ не будет иметь никакого дальнейшего значения. – BinaryMisfit 10.10.2009, 00:58
-
2Если я использую, который не делает это означает, что я обрежу часть изображения далеко? – thegreyspot 10.10.2009, 05:59
-
3
При попытке отобразить миниатюры, просто устанавливание размера является плохой идеей. Полное изображение все еще загружено на пользовательский компьютер и изменено там. Это израсходовало их пропускную способность и питание процессора и делает Ваш сайт медленным для загрузки. Намного лучше создать миниатюры в правильном размере и загрузить их.
Полное изображение могло быть загружено при щелчке через от миниатюры - если, именно это Вы хотели.
Если Вы действительно хотите изменить размер на странице, необходимо удостовериться что:
new_width = new_height * (old_width / old_height)
сохранить соотношение сторон изображения.
Хотя, поскольку dlamblin указывает, что просто изменение одного значения должно сохранить соотношение сторон.
Так как Вы упоминаете Drupal, существуют различные модули для Drupal, чтобы обработать и управлять изображениями. Они позволят Вам настраивать свой сайт Drupal, таким образом, это будет сделано автоматически. По всей вероятности Вам нужно Изображение. Но можно исследовать Изображение, Изменяют размер Фильтра.
-
1К сожалению, у меня нет корневого доступа уровня, таким образом, я ничего не могу установить на сервере – thegreyspot 10.10.2009, 21:25
Поскольку Вы используете Drupal, Вы будете желать модуль Imagecache (http://drupal.org/project/imagecache). Хотя Вы говорите, что у Вас нет корневого доступа, Вам не нужно это для добавления модулей Drupal - Вам просто нужны доступ ftp и администраторская учетная запись на Вашем сайте Drupal (http://drupal.org/node/120641)