ti-enxame.com

Porcentagem de redimensionamento de imagem CSS de si mesmo?

Eu estou tentando redimensionar um img com uma porcentagem de si mesmo. Por exemplo, eu só quero diminuir a imagem pela metade redimensionando-a para 50%. Mas aplicando width: 50%; irá redimensionar a imagem para ser 50% do elemento container (o elemento pai que talvez o <body> por exemplo).

A pergunta é, posso redimensionar a imagem com uma porcentagem de si mesmo sem usar o javascript ou o lado do servidor? (Não tenho informações diretas do tamanho da imagem)

Tenho certeza que você não pode fazer isso, mas eu só quero ver se existe uma solução inteligente CSS apenas. Obrigado!

91
Min Ming Lo

Eu tenho 2 métodos para você.

Método 1. demo no jsFiddle

Este método redimensiona a imagem apenas visualmente, não as dimensões reais no DOM, e o estado visual após o redimensionamento centralizado no meio do tamanho original.

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

Nota de suporte do navegador: estatísticas de navegadores mostradas inline em css.

Método 2. demo no 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%;
}​

Nota: img.normal e img.fake é a mesma imagem.
Nota de suporte do navegador: Esse método funcionará em todos os navegadores, porque todos os navegadores suporte css propriedades usadas no método.

O método funciona desta maneira:

  1. #wrap e #wrap img.fake têm fluxo
  2. #wrap tem overflow: hidden para que suas dimensões sejam idênticas à imagem interna (img.fake)
  3. img.fake é o único elemento dentro de #wrap sem absolute de posicionamento para que não quebre o segundo passo
  4. #img_wrap tem absolute posicionamento dentro de #wrap e se estende em tamanho ao elemento inteiro (#wrap)
  5. O resultado da quarta etapa é que #img_wrap tem as mesmas dimensões que a imagem.
  6. Ao definir width: 50% em img.normal, seu tamanho é 50% de #img_wrap e, portanto, 50% do tamanho da imagem original.
98
Vladimir Starkov

HTML:

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

CSS:

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

Esta tem que ser uma das soluções mais simples usando a abordagem de elemento de contêiner.

Ao usar a abordagem do elemento container, essa questão é uma variação de esta questão . O truque é deixar o elemento contêiner encolher a imagem-filha, para que ele tenha um tamanho igual ao da imagem não-dimensionada. Assim, ao definir a propriedade width da imagem como um valor percentual, a imagem é dimensionada em relação à sua escala original.

Algumas das outras propriedades de habilitação e propriedades são: float: left/right, position: fixed e min/max-width, conforme mencionado na pergunta vinculada. Cada um tem seus próprios efeitos colaterais, mas display: inline-block seria uma escolha mais segura. Matt mencionou float: left/right em sua resposta, mas ele erroneamente atribuiu a overflow: hidden.

Demo no jsfiddle


Edit: Como mencionado por trojan , você também pode aproveitar o recém introduzido CSS3 intrínseca e extrínseca de dimensionamento módulo :

HTML:

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

CSS:

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

No entanto, nem todas as versões de navegadores suportam no momento da escrita .

37
user3829636

Tente a propriedade zoom

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

Edit: Aparentemente, o FireFox não suporta a propriedade zoom. Você deveria usar;

-moz-transform: scale(0.5);

para o FireFox.

10
Emir Akaydın

Outra solução é usar:

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

Ele não será validado porque o atributo src é necessário, mas funciona (exceto em qualquer versão de IE porque srcset não é suportado).

4
benface

Isso realmente é possível, e descobri como, por acidente, ao projetar meu primeiro site de design responsivo em grande escala.

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

O overflow: hidden fornece a altura e a largura do wrapper, apesar do conteúdo flutuante, sem usar o hack clearfix. Você pode então posicionar seu conteúdo usando margens. Você pode até mesmo tornar o wrapper div um bloco inline.

2
Matt

Este é um thread muito antigo, mas eu encontrei enquanto procurava por uma solução simples para exibir a captura de tela retina (alta resolução) na tela de resolução padrão.

Portanto, há uma solução somente em HTML para navegadores modernos:

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

Isso está dizendo ao navegador que a imagem tem o dobro do tamanho de exibição pretendido. Os valores são proporcionais e não precisam refletir o tamanho real da imagem. Pode-se usar 2w 1px para obter o mesmo efeito. O atributo src é usado apenas por navegadores legados.

O bom efeito disso é que ele exibe o mesmo tamanho na retina ou na tela padrão, encolhendo na última.

2
Max_B

Na verdade, a maioria das respostas aqui não dimensiona a imagem para a largura de em si.

Precisamos ter largura e altura de auto no elemento img para podermos começar com o tamanho original.

Depois disso, um elemento de contêiner pode dimensionar a imagem para nós.

Exemplo simples de HTML:

<figure>
    <img src="[email protected]" />
</figure>

E aqui estão as regras do CSS. Eu uso um contêiner absoluto neste caso:

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

Você poderia ajustar o posicionamento da imagem com regras como transform: translate(0%, -50%);.

0
Floris
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. 
});

Esta solução usa js e jquery e redimensiona com base apenas nas propriedades da imagem e não no pai. Pode redimensionar uma única imagem ou um grupo com base em parâmetros de classe e id.

para mais, clique aqui: https://Gist.github.com/jennyvallon/eca68dc78c3f257c5df5

0
Jenny Vallon

Eu acho que você está certo, só não é possível com CSS puro, tanto quanto eu sei (não cross-browser quero dizer).

Editar:

Ok, eu não gostei muito da minha resposta, então eu fiquei intrigado um pouco. Eu poderia ter encontrado uma idéia interessante que poderia ajudar .. talvez seja IS afinal (embora não seja a coisa mais bonita de todas):

Editar: testei e trabalhei no Chrome, no FF e no IE 8 e 9. . Não funciona no IE7.

exemplo jsFiddle aqui

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

Esta é uma abordagem não difícil:

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

then in css:
div {
    position: absolute;
}

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