Определение ширины и высоты как проценты, не скашивая фото пропорции в HTML
Я задавался вопросом если в ширине и высоте <img> атрибуты, я мог указать ширину и высоту как проценты?
Ну, я предполагаю, что это очевидно, потому что, когда я пробую так, это изменяет размер, но это, кажется, скашивает качество моего изображения.
Вот пример моей разметки с фиксированными атрибутами:
<img src="#" width="346" height="413">
Теперь, при попытке уменьшить масштаб этого, скажите наполовину через проценты:
<img src="#" width="50%" height="50%">
Я получаю что-то совершенно другое, чем:
<img src="#" width="173" height="206.5">
Я думаю, что просто существенно путаю свою разметку процента или что-то, потому что существует заметное различие между моим вторым и третьим примером визуально.
6 ответов
Примечание : недопустимо указывать проценты напрямую как атрибут
width или height , если вы не используете HTML 4.01 (дополнительные сведения см. В текущей спецификации , устаревшей спецификации и в этом ответе ). При этом браузеры часто допускают такое поведение для поддержки обратной совместимости.
Эти процентные значения ширины во втором примере фактически применяются к контейнеру, в котором находится ваш , а не к фактическому размеру изображения. Допустим, у вас есть следующая разметка:
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
Полученное изображение будет шириной 500 пикселей и высотой 300 пикселей.
jQuery Resize
Если вы пытаетесь уменьшить изображение до 50% от его ширины, вы можете сделать это с помощью фрагмента jQuery:
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
Просто убедитесь, что вы убрали любую высоту / ширину = 50% атрибуты в первую очередь.
Вот в чем разница:
Это устанавливает изображение в половину его исходного размера.
<img src="#" width="173" height="206.5">
Это устанавливает изображение в половину доступной области представления.
<img src="#" width="50%" height="50%">
Например, если вы поместите это изображение как единственный элемент на странице, оно попытается занять 50% ширины страницы, что сделает его потенциально больше его оригинального размера - а не половину его оригинального размера, как вы ожидаете.
Если изображение будет представлено в размере, превышающем исходный, оно будет выглядеть сильно пикселизированным.
width = "50%" и height = "50%" устанавливает атрибуты ширины и высоты равными половине ширины и высоты родительского элемента, если я не ошибаюсь. Также установка ширины или высоты должна установить ширину или высоту в процентах от родительского элемента, если вы используете проценты.
Вы можете установить одно или другое (но не оба сразу), и это должно дать желаемый результат.
<img src="#" height="50%">
Учитывая отсутствие информации об исходном размере изображения, указание процентов для ширины и высоты может привести к очень ошибочным результатам. Если вы пытаетесь убедиться, что изображение поместится в определенном месте на вашей странице, вам нужно будет использовать некоторый код на стороне сервера для управления этим изменением масштаба.
Из W3Schools
Высота в процентах содержащего элемента (например, «20%»).
Значит, я думаю, они имеют в виду элемент, в котором находится div?