Подтвердить что ты не робот

Как создать пропорциональную высоту/ширину изображения

Итак, я хочу, чтобы изображение было изменено до 30% от его первоначальной высоты/ширины. Представьте, что вы не знаете его высоту или ширину. Как бы вы поступили, используя только CSS/HTML?

Ответ 1

Обновление:

Используя обертку display: inline-block;, это можно сделать только с помощью CSS.

HTML

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}

Оболочка сворачивается до исходной ширины изображения, и затем правило CSS width: 30% для изображений приводит к уменьшению изображения до 30% от его родительской ширины (которая была его первоначальной шириной).

Вот демонстрация в действии.

К сожалению, нет чистого HTML/CSS способа сделать это, поскольку ни один из них не предназначен для выполнения подобных вычислений. Однако, это довольно просто с фрагментом jQuery:

$('img.toResizeClass').each(function(){

    var $img = $(this),
        imgWidth = $img.width(),
        imgHeight = $img.height();

    if(imgWidth > imgHeight){
        $img.width(imgWidth * 0.3);
    } else {
        $img.height(imgHeight * 0.3);
    }
});

Ответ 2

Если вам нужно быстрое встроенное решение:

<img style="max-width: 100px; height: auto; " src="image.jpg" />