CSS resmi kendi yüzdesini yeniden boyutlandırıyor mu?

109

Bir img'yi kendi yüzdesine göre yeniden boyutlandırmaya çalışıyorum. Örneğin, resmi% 50'ye yeniden boyutlandırarak yarı yarıya küçültmek istiyorum. Ancak uygulama width: 50%;, görüntüyü kap öğesinin% 50'si olacak şekilde yeniden boyutlandıracaktır ( <body>örneğin , ana öğe ).

Soru şu ki, javascript veya sunucu tarafı kullanmadan görüntünün bir yüzdesini yeniden boyutlandırabilir miyim? (Görüntü boyutu hakkında doğrudan bilgim yok)

Bunu yapamayacağınızdan oldukça eminim, ancak sadece CSS için akıllı bir çözüm olup olmadığını görmek istiyorum. Teşekkürler!

html css image

— Min Ming Lo
kaynak

Kullanırsanız, içeren öğenin yüzdesini alacaktır width: <number>%. Bunu yapmanın bir yolu olduğunu sanmıyorum!

— Aniket

111

Senin için 2 yöntemim var.

Yöntem 1. jsFiddle üzerinde demo

Bu yöntem, görüntüyü yalnızca görsel değil, DOM'daki gerçek boyutları ve orijinal boyutun ortasında ortalanmış olarak yeniden boyutlandırıldıktan sonra görsel durumu yeniden boyutlandırır.

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 notu: tarayıcı istatistiklericss,.

Yöntem 2. jsFiddle üzerinde demo

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 veimg.fakeaynı görüntüdür.
Tarayıcı desteği notu: Bu yöntem tüm tarayıcılarda çalışacaktır çünkü tüm tarayıcılarcssyöntemde kullanılan özellikleridesteklemektedir.

Yöntem şu şekilde çalışır:

#wrapve #wrap img.fakeakış var
#wrapyer alır overflow: hidden(boyutları, iç görüntüye denk olduğu bir şekilde img.fake)
img.faketek unsur içinde olduğu #wrapolmadan absoluteikinci adımı kırılmaz böylece konumlandırma
#img_wrapiçinde absolutekonumlandırılmıştır #wrapve boyut olarak tüm öğeye ( #wrap) kadar uzanır
Dördüncü adımın sonucu #img_wrap, görüntü ile aynı boyutlara sahip olmasıdır.
Ayarlayarak width: 50%üzerine img.normal, onun boyutudur 50%arasında #img_wrapve bu nedenle 50%orijinal görüntü boyutu.

— Vladimir Starkov
kaynak

Bu, görüntüyü orijinal boyutunun% 50'sine yeniden boyutlandırmaz, artık img_wrap ebeveyninin% 50'sidir ..

— Wesley

Sorunu çözme girişimi için güncellenmiş cevabıma bakın. Ne düşünüyorsun?

— Wesley

Görünürlük yerine display: none kullanmanın mümkün olduğunu düşünüyorum, kodumdaki gibi. Örneğinizde, sahte gizli görüntünün alanı hala 'rezerve edilmiştir' ve eğer etrafına içerik koyarsanız akışı alt üst eder

— Wesley

bu imkansızdır, çünkü ana numara iç içe geçmiş ve kayan iki etiketdedir.

— Vladimir Starkov

1

transform:scale()Solüsyon büyük sorun olsa vardır. CSS kutu modeliyle iyi etkileşime girmiyor. Hangi derken onunla etkileşim değil anlamına hiç tüm yanlış görünüyor düzeni olsun, böylece. Bakınız: jsfiddle.net/kahen/sGEkt/8

— kahen

47

HTML:

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

CSS:

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

Bu, konteyner elemanı yaklaşımını kullanan en basit çözümlerden biri olmalıdır.

Konteyner eleman yaklaşımı kullanırken, bu soruyu bir varyasyonu bu soruya . İşin püf noktası, kap öğesinin alt görüntüyü küçültmesine izin vermektir, böylece boyutlandırılmamış görüntünün boyutuna eşit olacaktır. Bu nedenle, widthgörüntünün özelliğini yüzde değeri olarak ayarlarken , görüntü orijinal ölçeğine göre ölçeklenir.

Diğer ShrinkWrapping etkinleştirmeyi özelliklere ve özellik değerlerinin bazıları şunlardır float: left/right, position: fixedve min/max-widthbağlantılı söz konusu belirtildiği gibi,. Her birinin kendi yan etkileri vardır, ancak display: inline-blockdaha güvenli bir seçim olacaktır. Matt float: left/rightcevabında bahsetti , ama yanlış bir şekilde buna atfetti overflow: hidden.

Jsfiddle demosu

Düzenleme: Truva atında belirtildiği gibi , yeni tanıtılan CSS3 iç ve dış boyutlandırma modülünden de yararlanabilirsiniz :

HTML:

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

CSS:

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

Ancak, tüm popüler tarayıcı sürümleri yazım sırasında desteklemiyor .

— Topluluk
kaynak

@Kapsam sınırlarının çökmemesini nasıl düzeltebilirim? keman

— CoR

Bu tam da ihtiyacım olan şeydi ... hızlı ve basit bir şey, teşekkürler. Bunu şöyle kullandım: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

— Chnikki

Gelecekteki okuyucular için: üzerinde ayarlamak için doğru değer figureolduğunu width: fit-content;bugün itibariyle. Tarayıcı desteği de bugün çok daha iyi.

— Dániel Kis-Nagy

12

zoomMülkü dene

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

Düzenleme: Görünüşe göre, FireFox zoomözelliği desteklemiyor . Kullanmalısın;

-moz-transform: scale(0.5);

FireFox için.

— Emir Akaydın
kaynak

4

"Yakınlaştırma" diye bir CSS özelliği yoktur ve IE dışında kimse tarafından desteklenmez. Bu Microsoft'a özel bir şeydir ve standart değildir.

— Rob

9

Maalesef bu bilgilerin güncelliğini yitirmiş durumda. Zoom şu anda Internet Explorer, Chrome ve Safari tarayıcıları tarafından desteklenmektedir. FireFox ve Opera henüz desteklemiyor. Bu yüzden düzenleme bölümünü ekledim. IE onu destekleyen ilk kişi ama tek değil.

— Emir Akaydın

Bu bağlantıya göre Opera da yakınlaştırmayı destekliyor gibi görünüyor. FireFox, desteklemeyen tek kişidir. fix-css.com/2011/05/css-zoom

— Emir Akaydın

2

Bu nedenle IE, son 8 yılda pazar payının yarısını kaybetti. Bir şeyi desteklemek için tarayıcılara güvenilir bir şekilde güvenemiyorsanız, ortak bir zeminiz yok. Spesifikasyon, tarayıcı satıcılarının kendileri tarafından yazılır. Oraya koymazlarsa, o zaman ona güvenmeyin, yoksa yaptığınız gibi birden fazla işaretleme satırı yazarsınız. Bu yine 1998 değil.

— Rob

1

Fark ettiniz mi bilmiyorum ama "yakınlaştırma" Internet Explorer, Chrome, Safari ve Opera tarafından destekleniyor. bu, "yakınlaştırma" nın satıcıya özgü olmadığının kanıtıdır. yalnızca FireFox farklıdır. bu yüzden sorumu tekrar ediyorum. uyumlu css özelliğine sahip temiz çözüm nedir? Benim cevabım, birisi uygun bir standart çözüm bulana kadar en iyi cevaptır.

— Emir Akaydın

5

Başka bir çözüm kullanmaktır:

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

srcÖznitelik gerekli olduğu için doğrulanmaz , ancak çalışır ( srcsetdesteklenmediği için herhangi bir IE sürümünde hariç ).

— Benface
kaynak

2

Bu aslında mümkün ve ilk büyük ölçekli duyarlı tasarım sitemi tasarlarken kazara keşfettim.

<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, kayan içeriğe rağmen sarmalayıcı yüksekliğini ve genişliğini clearfix hack kullanmadan verir. Daha sonra içeriğinizi kenar boşluklarını kullanarak konumlandırabilirsiniz. Sarıcı div'i bir satır içi blok bile yapabilirsiniz.

— Mat
kaynak

2

Bu çok eski bir iş parçacığı, ancak retina (yüksek çözünürlüklü) ekran görüntüsünü standart çözünürlüklü ekranda görüntülemek için basit bir çözüm ararken buldum.

Dolayısıyla, modern tarayıcılar için yalnızca HTML çözümü vardır:

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

Bu, tarayıcıya görüntünün amaçlanan görüntü boyutunun iki katı boyutta olduğunu söylüyor. Değer orantılıdır ve görüntünün gerçek boyutunu yansıtması gerekmez. Aynı etkiyi elde etmek için 2w 1px de kullanılabilir. Src niteliği yalnızca eski tarayıcılar tarafından kullanılır.

Bunun güzel etkisi, retinada veya standart ekranda aynı boyutu göstermesi, ikincisinin küçülmesidir.

— Max_B
kaynak

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

Bu çözüm js ve jquery kullanır ve üst öğeye değil, yalnızca görüntü özelliklerine göre yeniden boyutlandırır. Sınıf ve kimlik parametrelerini kullanarak tek bir görüntüyü veya bir grubu yeniden boyutlandırabilir.

daha fazlası için buraya gidin: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— Jenny Vallon
kaynak

0

Bu zor olmayan bir yaklaşım:

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

then in css:
div {
    position: absolute;
}

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

— Nickthehero
kaynak

0

Aslında buradaki yanıtların çoğu, görüntüyü kendi genişliğine göre ölçeklendirmiyor .

imgOrijinal boyutuyla başlayabilmemiz için öğenin kendisinde bir genişlik ve yüksekliğe sahip olmamız gerekir .

Bundan sonra bir konteyner elemanı bizim için resmi ölçekleyebilir.

Basit HTML örneği:

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

Ve işte CSS kuralları. Bu durumda mutlak bir kap kullanıyorum:

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

Görüntü konumlandırmasını gibi kurallarla ince ayar yapabilirsiniz transform: translate(0%, -50%);.

— Floris
kaynak

-1

Sanırım haklısın, bildiğim kadarıyla saf CSS ile bu mümkün değil (yani tarayıcılar arası değil).

Düzenle:

Tamam cevabımı pek beğenmedim, bu yüzden biraz şaşırdım. Yardımcı olabilecek ilginç bir fikir bulmuş olabilirim .. belki de mümkün olabilir (her ne kadar şimdiye kadarki en güzel şey olmasa da):

Düzenleme: Chrome, FF ve IE 8 ve 9'da test edildi ve çalışıyor. . IE7'de çalışmıyor.

jsFiddle örneği burada

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

— Wesley
kaynak

örneğiniz resminizi orantılı olarak yeniden boyutlandırmıyor

— Vladimir Starkov

Yönteminiz, pencereyi yeniden boyutlandırarak görüntüyü küçültmeyi mümkün kılar

— Vladimir Starkov

çünkü kullandığınız için inline-block, bu yüzden genişlik #img_wrapsadece iç html genişliğine değil, aynı zamanda bağlam-kap genişliğine de bağlıdır.

— Vladimir Starkov

Anladığım kadarıyla, bu ekran: hiçbir görüntü hiçbir şey yapmaz ve kaldırılabilir. Yoksa bir şey mi kaçırıyorum?

— tremby