Görüntünün kendisi yüzde boyutlandırma CSS?

SORU

6 Aralık 2011, Salı

Görüntünün kendisi yüzde boyutlandırma CSS?

Kendisi bir yüzde ile bir ımg yeniden boyutlandırmak için çalışıyorum. Örneğin, ben sadece 50% boyutlandırma için yarı yarıya küçültmek istiyor. Ama width: 50%; Uygulama kapsayıcı öğesi (belki örneğin <body> olan ana öğe) 50% görüntü boyutunu olacaktır.

Soru, javascript veya sunucu tarafı kullanmadan kendisi yüzdesi ile resmi yeniden boyutlandırmak. (Görüntü boyutu) direk bilgi aldım

Bunu yapamazsınız eminim, ama ben sadece akıllı CSS tek çözüm olup olmadığını görmek istiyorum. Teşekkürler!

CEVAP

25 Mayıs 2012, Cuma

Senin için 2 yöntem var.

Yöntem 1. demo on jsFiddle

Bu yöntem, görüntü sadece bu görsel DOM gerçek boyutları yeniden boyutlandırma, yeniden boyutlandırma ve sonra visual state orijinal boyut ortasında merkezli.

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

Tarayıcı desteği not:tarayıcılar istatistikleri css satır içi gösterdi.

Yöntem 2. demo on 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%;
}

Not:img.normal img.fake aynı görüntü.
Tarayıcı desteği not:Bu yöntem, tüm tarayıcılar css özellikleri yönteminde kullanılan destek çünkü tüm tarayıcılarda çalışır.

Yöntemi bu şekilde çalışır:

'#şal' ve '#şal ımg.sahte' flow
#wrap overflow: hidden #wrap boyutlarını ayarlamak için aynı şekilde iç görüntü (img.fake)
img.fake absolute #wrap 21 *pozisyonu olmayan bir öğe ikinci adım sonucu değil kırmak için.
#img_wrap #wrap içinde absolute pozisyon vardır ve tüm element (#wrap) boyut olarak genişletilmiş
Dördüncü adım sonucudur #wrap_img görüntü olarak aynı boyutta.
responsive images yöntemi kullanarak img.normal width: 50%; set ve sizin sonuç var şimdi.