CSS Menampilkan Gambar yang Diubah Ukuran dan Dipotong


334

Saya ingin menampilkan gambar dari URL dengan lebar dan tinggi tertentu walaupun memiliki rasio ukuran yang berbeda. Jadi saya ingin mengubah ukuran (mempertahankan rasio) dan kemudian memotong gambar ke ukuran yang saya inginkan.

Saya dapat mengubah ukuran dengan imgproperti html dan saya dapat memotong dengan background-image.
Bagaimana saya bisa melakukan keduanya?

Contoh:

Gambar ini:

masukkan deskripsi gambar di sini


Memiliki ukuran 800x600piksel dan saya ingin menampilkan seperti gambar 200x100piksel


Dengan imgsaya dapat mengubah ukuran gambar 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">


Itu memberi saya ini:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


Dan dengan background-imagesaya dapat memotong 200x100piksel gambar .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Memberi saya:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


Bagaimana saya bisa melakukan keduanya?
Ubah ukuran gambar dan potong ukuran yang saya inginkan?

Jawaban:


475

Anda dapat menggunakan kombinasi kedua metode, mis.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Anda dapat menggunakan negatif marginuntuk memindahkan gambar di dalam <div/>.


9
Perhatikan bahwa jika Anda mengatur posisi: relatif pada gambar yang ada, Anda harus mengatur posisi: relatif pada div yang berisi. Jika tidak, saya telah menemukan bahwa IE tidak akan benar-benar memotong gambar.
Frank Schwieterman

juga hapus ketinggian dari .crop img class
Waqar Alamgir

@ waqar-alamgir Tidak akan berhasil jika Anda menghapus deklarasi ketinggian
roborourke

6
Perhatikan juga bahwa ketika menggunakan css untuk memotong gambar, pengguna masih harus mengunduh gambar. Mungkin lebih baik menggunakan php dan GD atau pustaka pengeditan gambar lain untuk mengubah ukuran dan memotong gambar sebelum mengirimnya ke pengguna. Itu semua tergantung pada apa yang Anda inginkan, memuat server atau bandwidth pengguna.
J-Rou

15
Hanya catatan untuk orang lain: .crop tinggi dan lebar menentukan di mana harus mengiris bagian paling bawah dan paling kanan dari gambar. .crop img tinggi dan lebar akan menskala gambar. .crop img margin akan menggeser gambar
Frederik

138

Dengan CSS3, Anda dapat mengubah ukuran background-imagedengan background-size, memenuhi kedua tujuan sekaligus.

Ada banyak contoh di css3.info .

Diimplementasikan berdasarkan contoh Anda , menggunakan donald_duck_4.jpg . Dalam hal ini, background-size: cover;hanya apa yang Anda inginkan - itu cocok background-imageuntuk menutupi seluruh area yang mengandung <div>dan klip kelebihan (tergantung pada rasio).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>


1
Solusi bagus, tetapi satu peringatan adalah tidak kompatibel dengan IE <9 (Jika itu penting bagi siapa pun lagi). Juga, saya ingin menyebutkan, jika Anda mengganti penutup dengan isi untuk ukuran latar belakang, itu akan skala, tetapi tidak memotong gambar.
devnate


111

Apakah Anda mencoba menggunakan ini?

.centered-and-cropped { object-fit: cover }

Saya perlu mengubah ukuran gambar, tengah (baik secara vertikal dan horizontal) dan daripada memotongnya.

Saya senang menemukan, bahwa itu bisa dilakukan dalam satu css-line. Lihat contoh di sini: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Berikut adalah CSSdan HTMLkode dari contoh itu:

.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">


2
Terima kasih, saya pikir ini adalah cara termudah dan paling universal untuk dilakukan - tetapi tampaknya tidak berfungsi dengan IE: / Temukan dokumen di sini: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
Objek-fit CSS3 tidak didukung oleh IE11 atau EDGE (14) caniuse.com/#feat=object-fit
eye-wonder

1
@ eye-heran didukung di Edge 16, segera keluar. Jika tidak kritis dan digunakan hemat, itu dapat digunakan hari ini
Ray Foss

Di CSS3, kita bisa mencoba img + object-fit atau div + background-image. Sejauh ini dalam pengalaman saya background-image dapat digunakan untuk memenuhi lebih banyak kondisi.
Eric

1
Sampai sekarang ini juga didukung oleh Edge (tidak tahu sejak kapan sekalipun).
Gerald Schneider

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

Div yang berisi dengan dasarnya memotong gambar dengan menyembunyikan overflow.


13
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />

8

Terima kasih sanchothefat.

Saya memiliki peningkatan pada jawaban Anda. Karena pemangkasan sangat disesuaikan untuk setiap gambar, definisi ini harus di HTML alih-alih CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

6
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

6

object-fitdapat membantu Anda, jika Anda bermain dengan <img>tag

Kode di bawah ini akan memotong gambar Anda untuk Anda. Anda dapat bermain-main dengan objek-fit

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Itu membuat hari saya - saya bisa dengan mudah melampirkan ini ke slide dalam implementasi carousel slider saya yang licin - solusi objek IMG sederhana dan tidak menyentuh ke dalam "basis kode slider plugin"
andreas-supersmart

itulah keunggulan CSS :)
Hidayt Rahman


4

Di kelas pangkas, tempatkan ukuran gambar yang ingin Anda tampilkan:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

Html akan terlihat seperti:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

3
<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

1

Anda dapat meletakkan tag img di tag div dan melakukan keduanya, tetapi saya akan merekomendasikan untuk tidak menskala gambar di browser. Itu melakukan pekerjaan yang buruk sebagian besar waktu karena browser memiliki algoritma penskalaan yang sangat sederhana. Lebih baik melakukan scaling Anda di Photoshop atau ImageMagick terlebih dahulu, kemudian sajikan kepada klien dengan baik dan cantik.


1

Apa yang saya lakukan adalah membuat skrip sisi server yang akan mengubah ukuran dan memotong gambar di ujung server sehingga akan mengirim lebih sedikit data di seluruh jala.

Ini cukup sepele, tetapi jika ada yang tertarik, saya dapat menggali dan memposting kode (asp.net)


CGI mungkin merupakan metode yang paling portabel (dan efisien bandwidth), kecuali OP bermaksud untuk memungkinkan pengguna untuk melakukan pengubahan ukuran dan pemangkasan sendiri melalui Javascript.
strager

1

Ada layanan seperti Filestack yang akan melakukan ini untuk Anda.

Mereka mengambil url gambar Anda dan memungkinkan Anda untuk mengubah ukurannya menggunakan parameter url. Ini sangat mudah.

Gambar Anda akan terlihat seperti ini setelah mengubah ukuran menjadi 200x100 tetapi menjaga aspek rasio

Seluruh url terlihat seperti ini

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

tetapi bagian yang penting adalah adil

resize=width:200/crop=d:[0,25,200,100]

masukkan deskripsi gambar di sini


colokan yang bagus mungkin - tetapi sama-sama - layanan yang luar biasa (tidak, saya tidak dibayar untuk mengatakan ini ;-)) - Saya benar-benar baru saja mendaftar dan itu cukup keren
Jonathan Lyon

1

Coba gunakan clip-pathproperti:

Properti clip-path memungkinkan Anda klip elemen ke bentuk dasar atau ke sumber SVG.

Catatan: Properti jalur klip akan menggantikan properti klip yang tidak digunakan lagi.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

Lebih banyak contoh di sini .


0
<div class="crop">
    <img src="image.jpg"/>
</div>
.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

0

Jika Anda menggunakan Bootstrap, coba gunakan { background-size: cover; }untuk <div>mungkin memberikan div sebuah katakanlah kelas <div class="example" style=url('../your_image.jpeg');>sehingga menjadi div.example{ background-size: cover}


0

Saya perlu melakukan ini baru-baru ini. Saya ingin membuat tautan thumbnail ke grafik NOAA. Karena grafik mereka dapat berubah kapan saja, saya ingin thumbnail saya berubah dengannya. Tetapi ada masalah dengan grafik mereka: grafik ini memiliki batas putih besar di bagian atas, jadi jika Anda hanya skala untuk membuat thumbnail Anda berakhir dengan spasi kosong di dokumen.

Inilah cara saya menyelesaikannya:

http://sealevel.info/example_css_scale_and_crop.html

Pertama saya perlu melakukan sedikit aritmatika. Gambar asli dari NOAA adalah 960 × 720 piksel, tetapi tujuh puluh piksel teratas adalah area perbatasan putih yang berlebihan. Saya membutuhkan thumbnail 348 × 172, tanpa area perbatasan tambahan di bagian atas. Itu berarti bagian yang diinginkan dari gambar asli adalah 720 - 70 = 650 piksel. Saya perlu skala itu ke 172 piksel, yaitu, 172/650 = 26,5%. Itu berarti 26,5% dari 70 = 19 baris piksel perlu dihapus dari atas gambar yang diskalakan.

Begitu…

  1. Atur tinggi = 172 + 19 = 191 piksel:

    tinggi = 191

  2. Atur margin bawah ke -19 piksel (memperpendek gambar hingga 172 piksel tinggi):

    margin-bottom: -19px

  3. Atur posisi teratas ke -19 piksel (menggeser gambar ke atas, sehingga baris 19 piksel teratas meluap & disembunyikan alih-alih yang bawah):

    atas: -19px

HTML yang dihasilkan terlihat seperti ini:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Seperti yang Anda lihat, saya memilih untuk menata tag <a> yang berisi, tetapi Anda dapat menata <div>.

Salah satu artifak dari pendekatan ini adalah bahwa jika Anda menunjukkan batas, batas atas akan hilang. Karena saya menggunakan border = 0 bagaimanapun, itu bukan masalah bagi saya.


0

Anda dapat menggunakan Layanan Ubah Ukuran Gambar Kodem . Anda dapat mengubah ukuran gambar apa pun hanya dengan panggilan http. Dapat digunakan dengan santai di browser atau digunakan di aplikasi produksi Anda.

  • Unggah gambar di tempat yang Anda sukai (S3, imgur dll.)
  • Hubungkan ke url API khusus Anda (dari dasbor kami)
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.