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

109

Я пытаюсь изменить размер img в процентах от себя. Например, я просто хочу уменьшить изображение вдвое, изменив его размер до 50%. Но применение width: 50%;приведет к изменению размера изображения до 50% элемента контейнера (например, родительского элемента <body>).

Вопрос в том, могу ли я изменить размер изображения в процентах от самого себя без использования javascript или серверной части? (У меня нет прямой информации о размере изображения)

Я почти уверен, что вы не можете этого сделать, но я просто хочу посмотреть, есть ли интеллектуальное решение только для CSS. Спасибо!

html css image

— Мин Мин Ло
источник

Это займет процент содержимого элемента, если вы воспользуетесь им width: <number>%. Я не думаю, что есть способ сделать это!

— Aniket

111

У меня для вас есть 2 метода.

Метод 1. демонстрация на jsFiddle

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

html:

<img class="fake" src="example.png" />

css:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

Примечание о поддержке браузера : статистика браузеров отображается в форматеcss.

Метод 2. демонстрация на jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

css:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

Примечание: img.normal иimg.fakeэто то же изображение.
Примечание о поддержке браузера: этот метод будет работать во всех браузерах, поскольку все браузеры поддерживаютcssсвойства, используемые в методе.

Метод работает так:

#wrapи #wrap img.fakeесть поток
#wrapимеет overflow: hiddenтак, что его размеры идентичны внутреннему изображению ( img.fake)
img.fakeединственный элемент внутри #wrapбез absoluteпозиционирования, чтобы он не нарушал второй шаг
#img_wrapимеет absoluteпозиционирование внутри #wrapи распространяется по размеру на весь элемент ( #wrap)
Результат четвертого шага - тот #img_wrapже размер, что и изображение.
Установив width: 50%на img.normalее размер 50%из #img_wrap, и , следовательно , 50%от размера исходного изображения.

— Владимир Старков
источник

Это не изменяет размер изображения до 50% от его исходного размера, теперь это 50% от родительского элемента img_wrap ..

— Уэсли

См. Мой обновленный ответ, чтобы попытаться решить проблему. Что вы думаете?

— Уэсли

Я думаю, что должно быть возможно использовать display: none вместо видимости, как в моем коде. В вашем примере пространство для фальшивого скрытого изображения по-прежнему «зарезервировано», что затрудняет поток, если вы помещаете вокруг него контент

— Уэсли,

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

— Владимир Старков

1

Однако у transform:scale()решения есть большая проблема. Он плохо взаимодействует с блочной моделью CSS. Я имею в виду , что он не взаимодействует с ним на всех , так что вы получите макет , который выглядит все неправильно. См .: jsfiddle.net/kahen/sGEkt/8

— kahen

47

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

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

HTML:

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

CSS:

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

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

— Сообщество
источник

@Anyone, как исправить не схлопывающиеся границы диапазона? fiddle

— CoR

Это было именно то, что мне нужно ... что-то быстрое и простое, спасибо. Я использовал это так: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

— Chnikki

Для читателей в будущем: правильное значение для установки на figureэто width: fit-content;как сейчас. Поддержка браузеров сегодня также намного лучше.

— Даниэль Кис-Надь,

12

Попробуйте zoomнедвижимость

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

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

-moz-transform: scale(0.5);

для FireFox.

— Эмир Акайдын
источник

4

Не существует такого свойства CSS, как «масштабирование», и оно не поддерживается никем, кроме IE. Это проприетарная вещь Microsoft и нестандартная.

— Роб

9

К сожалению, эта информация устарела. На данный момент Zoom поддерживается браузерами Internet Explorer, Chrome и Safari. FireFox и Opera пока не поддерживают его. Вот почему я добавил часть редактирования. IE - первый, но не единственный, который его поддерживает.

— Эмир Акайдын 06

Согласно этой ссылке, Opera, похоже, также поддерживает масштабирование. FireFox - единственный, который не поддерживает. fix-css.com/2011/05/css-zoom

— Эмир Акайдын

2

Вот почему IE потерял половину своей доли рынка за последние 8 лет. Если вы не можете надежно рассчитывать на поддержку браузерами чего-либо, значит, у вас нет точек соприкосновения. Спецификация написана самими поставщиками браузеров. Если они не вставят его туда, не полагайтесь на это, иначе вы напишете несколько строк разметки, как вы это сделали. Это не 1998 год снова и снова.

— Роб

1

Не знаю, заметили ли вы, но «масштабирование» поддерживается Internet Explorer, Chrome, Safari и Opera. это доказательство того, что "масштабирование" не зависит от производителя. отличается только FireFox. так что я повторяю свой вопрос. какое чистое решение с совместимым свойством css? мой ответ - лучший ответ, пока кто-нибудь не найдет подходящее стандартное решение.

— Эмир Акайдын

5

Другое решение - использовать:

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

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

— Benface
источник

2

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

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

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

— Мэтт
источник

2

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

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

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

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

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

— Макс_Б
источник

0

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 и меняет размер только в зависимости от свойств изображения, а не от родителя. Он может изменять размер одного изображения или группы на основе параметров class и id.

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

— Дженни Валлон
источник

0

Это несложный подход:

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

then in css:
div {
    position: absolute;
}

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

— Nickthehero
источник

0

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

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

После этого элемент контейнера может масштабировать изображение за нас.

Простой пример HTML:

<figure>
    <img src="your-image@2x.png" />
</figure>

А вот правила CSS. В этом случае я использую абсолютный контейнер:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

Вы можете настроить расположение изображения с помощью таких правил, как transform: translate(0%, -50%);.

— Флорис
источник

-1

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

Редактировать:

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

Изменить: протестировано и работает в 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%;
}

— Уэсли
источник

в вашем примере изменение размера изображения непропорционально

— Владимир Старков

Ваш метод позволяет уменьшить изображение за счет изменения размера окна

— Владимир Старков

это потому, что вы используете inline-block, поэтому ширина #img_wrapзависит не только от внутренней ширины html, но и от ширины контекстного контейнера.

— Владимир Старков

Насколько я могу судить, это изображение display: none ничего не делает и может быть удалено. Или я что-то упускаю?

— tremby 06