Я хотел бы отображать фотографии, которые я загружаю (на свой сайт drupal), и я хотел бы сделать фотографии меньше, но использование heigh = 100 не учитывает соотношение сторон. Все, что я хочу сделать, это уменьшить масштаб изображения.
6 ответов
10
Вы можете сделать это с помощью таблицы стилей. Сначала определите следующий стиль:
.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, который не делает.
Источник: Максимальная ширина изображения и высота
Спасибо за отзыв, Диаго.
4
Если вы пытаетесь отобразить миниатюры, просто установить размер - плохая идея. Изображение в полном размере все еще загружается на компьютер пользователя и там изменяется. Это увеличивает их пропускную способность и мощность процессора и замедляет загрузку вашего сайта. Гораздо лучше создавать эскизы в нужном размере и загружать их.
Полноразмерное изображение может быть загружено одним кликом с миниатюры - если это было то, что вы хотели.
Если вы хотите изменить размер страницы, убедитесь, что:
new_width = new_height * (old_width / old_height)
сохранить соотношение сторон изображения.
Хотя, как указывает Дламблин, просто изменение одного значения должно сохранить соотношение сторон.
3
Если вы указываете только ширину или высоту, но не оба, вы сохраняете соотношение сторон, поэтому вы, вероятно, случайно наследуете width=100% или что-то в этом роде. Осмотрите элемент с помощью Firebug или Safari.
Если вы беспокоитесь о том, что произойдет с фотографией, отличной от 4: 3 или 3: 4, например с фотографиями панорам, отправленными пользователем, вы можете рассмотреть как max-height и max-width , так и overflow: none; на вмещающем блоке.
1
Поскольку вы упоминаете Drupal, для Drupal существуют различные модули для обработки и манипулирования изображениями. Они позволят вам настроить ваш сайт Drupal, так что это будет сделано автоматически. Скорее всего, вам нужно изображение. Но вы можете изучить фильтр изменения размера изображения.
0
Kompozer - это редактор WYSIWYG, который может делать это автоматически. Вы могли бы попробовать.
0
Поскольку вы используете Drupal, вам понадобится модуль Imagecache (http://drupal.org/project/imagecache). Хотя вы говорите, что у вас нет root-доступа, вам не нужно это для добавления модулей Drupal - вам просто нужен ftp-доступ и учетная запись администратора на вашем сайте Drupal (http://drupal.org/node/120641)