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

Question

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

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

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

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

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

Благодаря

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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