Persentase perubahan ukuran gambar CSS itu sendiri?

109

Saya mencoba mengubah ukuran img dengan persentase itu sendiri. Misalnya, saya hanya ingin mengecilkan gambar hingga setengahnya dengan mengubah ukurannya menjadi 50%. Tapi menerapkan width: 50%;akan mengubah ukuran gambar menjadi 50% dari elemen kontainer (elemen induk yang mungkin <body>misalnya).

Pertanyaannya adalah, dapatkah saya mengubah ukuran gambar dengan persentase itu sendiri tanpa menggunakan javascript atau sisi server? (Saya tidak memiliki informasi langsung tentang ukuran gambar)

Saya cukup yakin Anda tidak dapat melakukan ini, tetapi saya hanya ingin melihat apakah ada solusi khusus CSS saja. Terima kasih!

html css image

— Min Ming Lo
sumber

Ini akan mengambil persentase elemen yang mengandung jika Anda akan menggunakannya width: <number>%. Saya rasa tidak ada cara untuk melakukannya!

— Aniket

111

Saya punya 2 metode untuk Anda.

Metode 1. Demo di jsFiddle

Metode ini mengubah ukuran gambar hanya visual bukan dimensi sebenarnya di DOM, dan status visual setelah mengubah ukuran dipusatkan di tengah ukuran aslinya.

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

Catatan dukungan browser : statistik browser menunjukkan inline incss.

Metode 2. demo di 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%;
}

Catatan: img.normal danimg.fakemerupakan gambar yang sama.
Catatan dukungan browser: Metode ini akan berfungsi di semua browser, karena semua browser mendukungcss properti yang digunakan dalam metode.

Cara kerjanya seperti ini:

#wrapdan #wrap img.fakemengalir
#wrapmemiliki overflow: hiddensehingga dimensinya identik dengan gambar bagian dalam ( img.fake)
img.fakeadalah satu-satunya elemen di dalam #wraptanpa absolutepemosisian sehingga tidak merusak langkah kedua
#img_wrapmemiliki absolutepemosisian di dalam #wrapdan memperluas ukurannya ke seluruh elemen ( #wrap)
Hasil dari langkah keempat adalah yang #img_wrapmemiliki dimensi yang sama dengan gambar.
Dengan menetapkan width: 50%pada img.normal, ukurannya 50%dari #img_wrap, dan oleh karena itu 50%dari ukuran gambar asli.

— Vladimir Starkov
sumber

Ini tidak mengubah ukuran gambar menjadi 50% dari ukuran aslinya, sekarang 50% dari induk img_wrap ..

— Wesley

Lihat jawaban saya yang diperbarui untuk upaya memecahkan masalah. Bagaimana menurut anda?

— Wesley

Saya pikir seharusnya mungkin untuk menggunakan display: none, bukan visibility, seperti di kode saya. Dalam contoh Anda, ruang untuk gambar tersembunyi palsu masih 'dicadangkan' yang akan mengacaukan aliran jika Anda meletakkan konten di sekitarnya

— Wesley

itu tidak mungkin, karena trik utamanya adalah dalam dua tag bersarang dan mengambang.

— Vladimir Starkov

1

The transform:scale()solusi memiliki masalah meskipun besar. Itu tidak berinteraksi dengan baik dengan model kotak CSS. Maksud saya, itu tidak berinteraksi dengannya sama sekali , jadi Anda mendapatkan tata letak yang terlihat salah. Lihat: jsfiddle.net/kahen/sGEkt/8

— kahen

46

HTML:

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

CSS:

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

Ini harus menjadi salah satu solusi paling sederhana dengan menggunakan pendekatan elemen kontainer.

Saat menggunakan pendekatan elemen kontainer, pertanyaan ini adalah variasi dari pertanyaan ini . Triknya adalah membiarkan elemen penampung menyusut gambar anak, sehingga akan memiliki ukuran yang sama dengan gambar yang tidak berukuran. Jadi, saat menyetel widthproperti gambar sebagai nilai persentase, skala gambar tersebut relatif ke skala aslinya.

Beberapa sifat shrinkwrapping-memungkinkan lain dan nilai properti adalah: float: left/right, position: fixeddan min/max-width, seperti yang disebutkan dalam pertanyaan terkait. Masing-masing memiliki efek sampingnya sendiri, tetapi display: inline-blockakan menjadi pilihan yang lebih aman. Matt telah menyebutkan float: left/rightdalam jawabannya, tetapi dia salah menghubungkannya overflow: hidden.

Demo di jsfiddle

Sunting: Seperti yang disebutkan oleh trojan , Anda juga dapat memanfaatkan modul ukuran intrinsik & ekstrinsik CSS3 yang baru diperkenalkan :

HTML:

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

CSS:

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

Namun, tidak semua versi browser populer mendukungnya pada saat penulisan .

— Komunitas
sumber

@Ada yang bagaimana untuk memperbaiki batas rentang tidak runtuh? biola

— CoR

Inilah yang saya butuhkan ... sesuatu yang cepat dan sederhana, terima kasih. Saya menggunakannya seperti ini: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

— Chnikki

Untuk pembaca masa depan: nilai yang benar untuk mengatur pada figureadalah width: fit-content;seperti yang sekarang. Dukungan browser juga jauh lebih baik hari ini.

— Dániel Kis-Nagy

12

Coba zoomproperti

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

Edit: Rupanya, FireFox tidak mendukung zoomproperti. Kamu harus menggunakan;

-moz-transform: scale(0.5);

untuk FireFox.

— Emir Akaydın
sumber

4

Tidak ada properti CSS seperti "zoom" dan tidak didukung oleh siapa pun kecuali IE. Ini adalah milik Microsoft dan tidak standar.

— Rob

9

Sayangnya, informasi ini sudah ketinggalan zaman. Zoom didukung oleh browser Internet Explorer, Chrome dan Safari saat ini. FireFox dan Opera belum mendukungnya. Itu sebabnya saya menambahkan bagian edit. IE adalah yang pertama mendukungnya tetapi bukan satu-satunya.

— Emir Akaydın

Menurut tautan ini, Opera tampaknya juga mendukung zoom. FireFox adalah satu-satunya yang tidak mendukung. fix-css.com/2011/05/css-zoom

— Emir Akaydın

2

Itulah mengapa IE kehilangan setengah pangsa pasarnya selama 8 tahun terakhir. Jika Anda tidak dapat mengandalkan browser untuk mendukung sesuatu, Anda tidak memiliki kesamaan. Spesifikasi ditulis oleh vendor browser itu sendiri. Jika mereka tidak mau meletakkannya di sana, maka jangan mengandalkannya atau Anda akan menulis banyak baris markup seperti yang telah Anda lakukan. Ini bukan tahun 1998 lagi.

— Rob

1

saya tidak tahu apakah Anda memperhatikan tetapi "zoom" didukung oleh Internet Explorer, Chrome, Safari dan Opera. ini adalah bukti bahwa "zoom" tidak spesifik vendor. hanya FireFox yang berbeda. jadi saya ulangi pertanyaan saya. apa solusi bersih dengan properti css compitible? jawaban saya adalah jawaban terbaik sampai seseorang menemukan solusi standar yang tepat.

— Emir Akaydın

5

Solusi lain adalah dengan menggunakan:

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

Ini tidak akan memvalidasi karena srcatribut diperlukan, tetapi berfungsi (kecuali pada versi IE apa pun karena srcsettidak didukung).

— benface
sumber

2

Ini sebenarnya mungkin, dan saya menemukan betapa tidak sengaja saat merancang situs desain responsif skala besar pertama saya.

<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 memberikan tinggi dan lebar wrapper, meskipun isinya mengambang, tanpa menggunakan peretasan clearfix. Anda kemudian dapat memposisikan konten Anda menggunakan margin. Anda bahkan dapat membuat div pembungkus sebagai blok-sebaris.

— Matt
sumber

2

Ini adalah utas yang sangat lama tetapi saya menemukannya saat mencari solusi sederhana untuk menampilkan tangkapan layar retina (resolusi tinggi) pada tampilan resolusi standar.

Jadi ada solusi khusus HTML untuk browser modern:

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

Ini memberi tahu browser bahwa gambar tersebut berukuran dua kali lebih besar dari ukuran tampilan yang diinginkan. Nilainya proporsional dan tidak perlu mencerminkan ukuran gambar yang sebenarnya. Seseorang dapat menggunakan 2w 1px juga untuk mencapai efek yang sama. Atribut src hanya digunakan oleh browser lama.

Efek bagusnya adalah ia menampilkan ukuran yang sama pada retina atau layar standar, menyusut pada layar standar.

— Max_B
sumber

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

Solusi ini menggunakan js dan jquery dan mengubah ukuran hanya berdasarkan properti gambar dan bukan induknya. Itu dapat mengubah ukuran satu gambar atau grup berdasarkan menggunakan parameter class dan id.

untuk lebih lanjut, buka di sini: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— Jenny Vallon
sumber

0

Ini adalah pendekatan yang tidak sulit:

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

then in css:
div {
    position: absolute;
}

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

— nickthehero
sumber

0

Sebenarnya sebagian besar jawaban di sini tidak benar-benar menskalakan gambar dengan lebarnya sendiri .

Kita perlu memiliki lebar dan tinggi otomatis pada imgelemen itu sendiri sehingga kita bisa mulai dengan ukuran aslinya.

Setelah itu elemen container dapat menskalakan gambar untuk kita.

Contoh HTML sederhana:

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

Dan inilah aturan CSS. Saya menggunakan wadah absolut dalam kasus ini:

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

Anda dapat mengubah posisi gambar dengan aturan seperti transform: translate(0%, -50%);.

— Floris
sumber

-1

Saya pikir Anda benar, hanya saja tidak mungkin dengan CSS murni sejauh yang saya tahu (maksud saya bukan lintas-browser).

Edit:

Oke, saya tidak terlalu menyukai jawaban saya jadi saya sedikit bingung. Saya mungkin telah menemukan ide menarik yang bisa membantu .. mungkin itu memang mungkin (walaupun bukan yang tercantik):

Edit: Diuji dan berfungsi di Chrome, FF dan IE 8 & 9. . Itu tidak bekerja di IE7.

Contoh jsFiddle di sini

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
sumber

contoh Anda mengubah ukuran gambar tidak proporsional

— Vladimir Starkov

Metode Anda memungkinkan untuk mengurangi gambar melalui pengubahan ukuran jendela

— Vladimir Starkov

itu karena Anda menggunakan inline-block, itulah mengapa lebar #img_wraptidak hanya bergantung pada lebar html bagian dalam, tetapi juga pada lebar wadah konteks.

— Vladimir Starkov

Sejauh yang saya tahu, tampilan itu: tidak ada gambar yang tidak melakukan apa-apa dan dapat dihapus. Atau apakah saya melewatkan sesuatu?

— gemetar