Как изменить размер изображения в чистом HTML / CSS, сохранив его пропорции?

Question

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

На самом деле, я знаю, как это сделать, используя некоторый код сервера, но я не хочу этого делать. Это подразумевало бы использование другой ссылки на файл и ссылку на изображение, например, <img src="picture.php" />. Мне нужно обработать изображение на той же странице, где оно отображается.

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

Есть ли способ сделать что-то подобное? Может быть, из чистого HTML / CSS? : P

Я сделал функцию, которая делает что-то подобное (за исключением этой «обрезки»), и она возвращает просто width="" height="", и я использую ее вот так <img src="image.jpg" resize("image.jpg") />, но я не понимаю, как я могу сделать этот обрез ..

Спасибо

Answer 1

хорошо, так что мне удалось найти способ сделать это из html / css.Вся идея состояла в том, чтобы избавиться от этой «дополнительной высоты»:

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

сначала мое изображение изменяется до желаемой ширины (с сохранением пропорций), а затем задает фиксированную высоту для содержания div и setting overflow to hidden делаетскрипт для отображения только нужной части изображения.

Answer 2

Вы можете использовать phpThumb , чтобы изменить размер и обрезать изображения на лету.Он использует библиотеку GD для создания миниатюр из изображений JPEG, PNG, GIF и т. Д.

Answer 3

Я думаю, ImageMagick поддерживает методы «изменить размер, чтобы соответствовать» и «изменить размер, чтобы заполнить», последний из которых является тем, что вы ищете.

Перед записью вашего тега img в выходной буфер сохраните изображение в результирующем предложенном имени файла и позвольте «идентифицировать» извлечь ширину и высоту этого изображения для вас.

Если вы не хотите работать с отдельным файлом, а хотите, чтобы данные изображения были встроены, попробуйте метод data-uri , который поддерживается в новых веб-браузерах. Это встроит поток двоичных данных изображения в HTML-файл, поэтому он встроен.

Answer 4

Невозможно отобразить изображение и HTML в одном и том же файле, поскольку браузеры зависят от его заголовка content-type для его интерпретации.

Заголовок content-type документа HTML обычно устанавливается на text/html, тогда как тип содержимого изображения - image/* (вместо * формат изображения). Вы можете распечатать данные изображения в HTML-документе, но, поскольку браузер получает указание интерпретировать его как text/html, а не изображение, его содержимое будет искажено.

Вам нужно будет связать ваш тег <img> с файлом PHP, как вы описали. Я не уверен, почему это составляет проблему; это правильный путь. Конечно, вы можете обрезать изображение, манипулируя его размерами в HTML, но я не рекомендую это делать.

Answer 5

создать помощник, как:

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

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