Указание ширины и высоты в процентах без искажения пропорций фотографий в HTML

Question

Мне было интересно, если бы в атрибутах width и height я мог указать ширину и высоту в процентах?

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

Вот пример моей разметки с фиксированными атрибутами:

<img src="#" width="346" height="413">

Теперь, пытаясь уменьшить это значение, скажем, наполовину, с помощью процентов:

<img src="#" width="50%" height="50%">

Я получаю нечто совершенно иное, чем:

<img src="#" width="173" height="206.5">

Я думаю, что я просто фундаментально ошибаюсь в процентной наценке или что-то в этом роде, потому что между моим вторым и третьим примером визуально есть заметная разница.

ОБНОВЛЕНИЕ: Привет, спасибо всем за все полезные посты!

Мне действительно очень нравится предложение jQuery, сделанное Пэтом только потому, что с одним фрагментом, как он предложил,Я могу на самом деле изменить селектор и применить его ко всем изображениям, на которые влияют фантазии, например:

$('img.FancyBox').each(function(){
  $(this).width($(this).width() * 0.25);
});

Как это здорово!

Вы можете проверитьживого эффекта здесь на моем сайте: http://www.marioplanet.com/product.htm

Он работает довольно хорошо, учитывая тот факт, что, как только я подключу его к моей базе данных SQL Server, я могу просто применить этот один фрагмент jQuery ко всем FancyBoxклассные изображения на страницах моих товаров.

Спасибо, ребята!

Answer 1

Эти проценты ширины в вашем втором примере фактически применяются к контейнеру, в котором находится <img>, а не к реальному размеру изображения.Допустим, у вас есть следующая разметка:

<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 );
});

Просто убедитесь, что сначала вы удалили все атрибуты height / width = 50%.

Answer 2

Вы можете установить один или другой (только не оба), и это должно получить желаемый результат.

<img src="#" height="50%">

Answer 3

Вот разница:

Устанавливает изображение равным половине исходного размера.

<img src="#" width="173" height="206.5">

Устанавливает изображение на половину доступной области представления.

<img src="#" width="50%" height="50%">

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

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

Answer 4

Попробуйте использовать свойство scale в css3:

75% от оригинала:

-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);

50% от оригинала:

-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);

Answer 5

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

Answer 6

width = "50%" и height = "50%" устанавливает атрибуты width и height равными половине ширины и высоты родительского элемента, если я не ошибаюсь.Кроме того, установка только ширины или высоты должна устанавливать ширину или высоту в процентах от родительского элемента, если вы используете проценты.

Answer 7

Из W3Schools

Высота в процентах от содержащего элемента (например, "20%").

Так что я думаю, что они имеют в видуэлемент, в котором находится div?

Answer 8

Существует способ сделать это только с помощью html.Просто устанавливает:

<img src="#" width height="50%">