Как изменить размер изображения в чистом HTML/CSS при хранении его пропорций?
Как я могу изменить размер изображения с помощью HTML/CSS только (т.е. никакой серверный код) при хранении его пропорций и иметь эффект обрезки.Подробнее: Я хочу изменить размер его к указанной ширине, сохранить пропорции и если высота больше, чем заданное значение для обрезки его к заданной высоте?
На самом деле я знаю, как сделать то использование некоторого серверного кода, но я не хочу делать это. Это подразумевало бы использование другой ссылки на файл и отослало бы изображение что-то как <img src="picture.php" />. Я должен обработать изображение на той же странице, которая отображает его.
То, что "беспокоит" меня, - то, что я должен отправить заголовок изображения, таким образом, ничто иное на странице не будет отображено.
Существует ли способ сделать что-то как этот? Возможно, от чистого HTML/CSS?:P
Я сделал функцию, которая делает что-то как этот (за исключением того, что вещь "обрезки"), и она возвращается просто width="" height="" и я использую его как это <img src="image.jpg" resize("image.jpg") />, но я не добираюсь, как я могу сделать ту обрезку...
Спасибо
5 ответов
Хорошо, поэтому мне удалось найти способ сделать это из html / css. Вся идея заключалась в том, чтобы избавиться от этой «сверхвысоты»:
<div style="width:200px;height:200px;overflow:hidden;" >
<img src="image.jpg" width="200px" height="auto">
</div>
сначала размер моего изображения изменяется до желаемой ширины (с сохранением пропорций), а затем устанавливается фиксированная высота для содержащего div, и установка переполнения на скрытый делает сценарий для отображения только желаемой части изображения.
Я думаю, что ImageMagick поддерживает методы «изменить размер по размеру» и «изменить размер до заполнения», причем последнее - то, что вы ищете.
Перед записью тега img в буфер вывода сохраните изображение с предложенным именем файла и позвольте «идентификации» извлечь для вас ширину и высоту этого изображения.
Если вы не хотите работать с отдельным файлом, а вместо этого хотите, чтобы данные изображения были встроены, попробуйте метод data-uri , который поддерживают новые веб-браузеры. Это встраивает поток двоичных данных изображения в файл html, поэтому он встраивается.
создать помощника, например:
<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>
, чтобы этот помощник проверил, было ли уже создано изображение с измененным размером, или создаст новое. и в обоих случаях он возвращает правильный URL-адрес нового изображения.
Вы можете использовать phpThumb , чтобы изменять размер и обрезать изображения на лету. Он использует библиотеку GD для создания эскизов изображений JPEG, PNG, GIF и т. Д.
Вы не можете отобразить изображение и HTML в одном файле, потому что браузеры зависят от его content-type заголовка для интерпретации.
Заголовок content-type HTML-документа обычно имеет значение text/html, тогда как тип содержимого изображения - image/* (замените * на формат изображения). Вы можете напечатать данные изображения в документе HTML, но поскольку браузеру предписано интерпретировать его как text/html, а не как изображение, его содержимое будет искажено.
Вам нужно связать ваш тег