Bagaimana cara mengubah ukuran gambar latar belakang secara otomatis di css?

Dengan Cascading Style Sheets (CSS), Anda dapat mengubah ukuran dan rasio aspek gambar dan latar belakang. Tersedia tiga opsi pengubahan ukuran. mengubah ukuran mutlak, mempertahankan rasio aspek, dan mengubah ukuran relatif. Anda juga dapat menskalakan dan mengisi latar belakang. Namun, itu semua adalah pekerjaan manual yang membutuhkan waktu, keterampilan, dan usaha

Dengan Cloudinary, Anda dapat dengan mudah mengubah gambar, termasuk mengubah ukuran dan latar belakangnya. Artikel ini menjelaskan cara melakukan tugas tersebut secara manual dengan CSS dan melalui proses otomatis berbasis AI di Cloudinary

Inilah topiknya

Anda dapat mengubah ukuran gambar dengan CSS3, versi CSS terbaru, dengan salah satu dari tiga cara, seperti dijelaskan di bawah ini. Pilih pilihan Anda sesuai dengan nilai height dan width properti yang Anda inginkan

Dengan pengubahan ukuran absolut, Anda menentukan nilai height dan width bersama dengan nilai statis dalam piksel (

img{
  height: 100px;
  width: auto;
}

img{
  height: 100px;
  width: auto;
}

img{
  height: 100px;
  width: 200px;
}

Untuk mempertahankan rasio aspek, ubah nilai height atau width secara statis dan tetapkan

img{
  height: 100px;
  width: auto;
}

img{
  height: 100px;
  width: auto;
}

Ukuran relatif berarti mengubah ukuran gambar menurut induk

img{
  height: 100px;
  width: auto;
}

img{
  height: 100px;
  width: auto;
}

Contoh ini mengatur ukuran gambar agar sesuai dengan ruang yang tersedia di penampung induk

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Katakanlah Anda ingin mengubah ukuran gambar latar agar lebih pas dengan elemen atau halaman Anda. Properti

img{
  height: 100px;
  width: auto;
}

Mirip dengan mengubah ukuran dengan gambar standar, mengubah ukuran mutlak mengubah dimensi latar belakang agar sesuai dengan tinggi dan lebar yang Anda tentukan. Ingatlah bahwa mengatur nilai secara manual juga mengubah rasio aspek

Untuk mengubah ukuran latar belakang, tentukan lebar terlebih dahulu, lalu tinggi. Menghilangkan ketinggian default ke

img{
  height: 100px;
  width: auto;
}

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Ukuran relatif bekerja dengan cara yang sama seperti mengubah ukuran mutlak, seperti dijelaskan di atas, kecuali bahwa, di sini, Anda menentukan nilai untuk properti

img{
  height: 100px;
  width: auto;
}

  background-size: 50% auto;

Untuk secara otomatis mengubah ukuran latar belakang Anda hingga maksimum yang dapat ditahan oleh elemen induk, tentukan nilai

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Untuk menghentikan perilaku tersebut, tambahkan properti

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

Ini sebuah contoh

background-size: contain;
Background-repeat: no-repeat;

Untuk menerapkan efek yang serupa dengan

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

background-size: cover;

Untuk lebih banyak cara mengubah gambar di CSS, lihat artikel kami tentang efek dan filter gambar CSS

Layanan berbasis cloud untuk mengelola gambar dan video, Cloudinary menawarkan paket berlangganan gratis selamanya. Saat berada di platform itu, Anda dapat mengunggah gambar, menerapkan efek bawaan, filter, dan modifikasi. Anda juga dapat mengubah ukuran gambar secara otomatis, berfokus pada elemen terpenting dengan AI atau menyesuaikannya dengan desain situs web Anda tanpa harus memangkas atau menskalakannya secara manual

Selain itu, Anda dapat mengubah gambar secara terprogram dengan SDK atau parameter URL sederhana. Cloudinary menerapkan perubahan secara dinamis, membiarkan gambar asli Anda tetap utuh. Artinya, Anda dapat memodifikasi gambar dengan cepat untuk beradaptasi dengan perubahan desain—sangat nyaman dan menghemat waktu

Berikut adalah tiga cara untuk mengubah ukuran elemen atau gambar latar belakang dengan parameter URL Cloudinary. Setiap bagian di bawah menautkan Anda ke halaman Cloudinary Cookbook dengan detail lebih lanjut

Untuk membatasi ukuran gambar ke dimensi tertentu, ubah nilai

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Di bawah ini adalah gambar yang telah diubah ukurannya dari 850 x 565 px. hingga 70 x 70 piksel. dengan

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Memuat contoh kode

Untuk fokus pada detail tertentu—wajah, objek, kontras warna—sambil mengubah ukuran gambar, pangkas gambar dengan fitur gravitasi otomatis Cloudinary yang cerdas. Parameter yang disetel adalah

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

img{
  height: 100px;
  width: auto;
}

Cloudinary secara otomatis memangkas gambar dengan fitur berbasis AI yang sadar konten dengan memilih wajah, fitur individual, atau area minat. Untuk memicu tugas itu, terapkan filter

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Contoh ini dengan pengaturan

background-size: 100px 100px;

background-size: 100px;

background-size: 100px auto;

Contoh lain. untuk menghindari objek yang tidak relevan alih-alih produk dalam gambar produk yang menjadi pusat perhatian, tentukan produk sebagai fokus. Gambar di kanan bawah berfokus pada ransel

Memuat contoh kode

Selain kemampuan mengubah ukuran gambar, Cloudinary menawarkan banyak alat canggih untuk pengembang web, termasuk yang berikut ini

Bagaimana cara mengotomatiskan ukuran gambar di CSS?

Bagaimana cara membuat gambar latar cocok untuk semua ukuran layar di CSS?

Bagaimana cara mengubah ukuran gambar latar belakang di CSS responsif?

Bagaimana cara memaksa ukuran gambar di CSS?