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

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

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

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

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

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

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

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

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

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

UPDATE: Привет всем за все полезные сообщения!

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

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

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

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

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

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

Ответы

Ответ 1

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

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

Полученное изображение будет иметь ширину 500 пикселей и высоту 300 пикселей.

jQuery Изменить размер

Если вы пытаетесь уменьшить изображение до 50% его ширины, вы можете сделать это с помощью фрагмента jQuery:

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

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

Ответ 2

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

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

Ответ 3

Вот разница:

Устанавливает изображение на половину его первоначального размера.

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

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

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

От W3Schools

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

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

Ответ 7

Попробуйте использовать свойство 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);

Ответ 8

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

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