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

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

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

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

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

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

Спасибо


html css image-resizing
person kmunky    schedule 09.02.2010    source источник

Ответы (5)


arrow_upward
16
arrow_downward

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

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

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

person kmunky    schedule 10.02.2010
comment
Что бы это ни стоило, я смог удалить атрибут стиля из родительского div. У меня сработало простое использование width=200px и height=auto в теге img и обертывание div. - person l p; 07.11.2017

arrow_upward
1
arrow_downward

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

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

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

person Johannes Gorset    schedule 09.02.2010
comment
нет возможности сделать это в том же файле? - person kmunky; 10.02.2010
comment
@kmunky Есть способ ... Если я правильно вас понял, вы хотите встроить данные изображения. - person hurikhan77; 10.02.2010

arrow_upward
1
arrow_downward

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

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

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

person hurikhan77    schedule 09.02.2010

arrow_upward
1
arrow_downward

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

person Chetan Sharma    schedule 10.02.2010

arrow_upward
0
arrow_downward

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

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

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

person zerkms    schedule 09.02.2010