CSS Menampilkan Gambar yang Diubah Ukuran dan Dipotong

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:

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?

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/>.

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>

css3 gambar latar belakang ukuran latar belakang

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">

.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.

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

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>

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

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

Contoh Langsung: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Penjelasan: Di sini gambar diubah ukurannya dengan nilai lebar dan tinggi gambar. Dan memotong dilakukan oleh properti klip.

Untuk detail tentang properti klip, ikuti: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

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>

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

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.

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)

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]

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 .

<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*/
}

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}

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.

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)