CSS-изображение изменяет размер в процентах от себя?

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

это должно быть одним из самых простых решений с использованием подхода контейнерных элементов.

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

некоторые другие свойства и значения свойств, разрешающие термоусадочную упаковку:float: left/right,position: fixed и min/max-width, как уже упоминалось в связанном вопросе. Каждый из них имеет свои побочные эффекты, но display: inline-block было бы более безопасным выбором. Мэтт упомянул float: left/right в своем ответе, но он ошибочно приписал это overflow: hidden.

демо на jsfiddle

---

Edit: как упоминалось троян, вы также можете воспользоваться недавно введенным CSS3 внутренний и внешний модуль калибровки:

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

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

попробовать zoom свойства

<img src="..." style="zoom: 0.5" />

Edit: по-видимому, FireFox не поддерживает zoom собственность. Вы должны использовать;

-moz-transform: scale(0.5);

для FireFox.

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

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

переполнение: скрытый дает высоту и ширину обертки, несмотря на плавающее содержимое, без использования взлома clearfix. Затем вы можете разместить свой контент с помощью полей. Вы даже можете сделать оболочку div встроенным блоком.

другое решение заключается в использовании:

<img srcset="example.png 2x">

Он не будет проверять, потому что src атрибут является обязательным, но он работает (за исключением любой версии IE, потому что srcset не поддерживается).

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

Edit:

хорошо, мне не очень понравился мой ответ, поэтому я немного озадачился. Возможно, я нашел интересную идею, которая могла бы помочь.. может быть, это возможно в конце концов (хотя и не самая красивая вещь когда-либо):

изменить: Протестировано и работает в Chrome, FF и IE 8&9. . Он не работает в IE7.

пример jsFiddle здесь

html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

это решение использует js и jquery и изменяет размер только на основе свойств изображения, а не на родительском. Он может изменить размер одного изображения или группы на основе параметров класса и идентификатора.

для получения дополнительной информации, перейдите сюда:https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

Это очень старый поток, но я нашел его во время поиска простого решения для отображения retina (high res) Screen capture на стандартном дисплее разрешения.

Так что есть только HTML решение для современных браузеров :

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

это говорит браузеру, что изображение в два раза больше размера его предполагаемого размера дисплея. Значения пропорциональны и не должны отражать фактический размер изображения. Можно также использовать 2w 1px для достижения того же эффекта. Атрибут src используется только устаревшими браузерами.

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

это не трудный подход:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}