RWD (Responsive Web Design) Image di CSS

Section Artikel

1 Menggunakan Properti width
2 Menggunakan Properti max-width
3 Tambahkan Gambar ke Contoh Halaman Web
4 Gambar Latar Belakang
5 Gambar Berbeda untuk Perangkat Berbeda
6 Elemen <picture> HTML5
- 6.1 Dukungan Browser

Menggunakan Properti width

Jika properti width disetel ke persentase dan tinggi disetel ke “otomatis”, gambar akan responsif dan skala naik dan turun:

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" width="460" height="345">
<p> Ubah ukuran jendela browser untuk melihat bagaimana gambar akan diskalakan. </p>

</body>
</html>

Perhatikan bahwa pada contoh di atas, gambar dapat ditingkatkan skalanya menjadi lebih besar dari ukuran aslinya. Solusi yang lebih baik, dalam banyak kasus, adalah menggunakan properti max-width.

Menggunakan Properti max-width

Jika properti max-width disetel ke 100% gambar akan diperkecil jika harus, tetapi tidak pernah diperbesar menjadi lebih besar dari ukuran aslinya:

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" width="460" height="345">
<p> Ubah ukuran jendela browser untuk melihat bagaimana gambar akan diskalakan ketika lebarnya kurang dari 460px. </p>

</body>
</html>

Tambahkan Gambar ke Contoh Halaman Web

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

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

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>Kota</li>
      <li>Wisata</li>
      <li>Makanan</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>Kota Chania</h1>
    <p> Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota dapat dibagi menjadi dua bagian, kota tua dan kota modern. </p>
    <img src="https://dosenit.com/wp-content/uploads/2020/10/img_chania.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>Apa?</h2>
      <p> Chania adalah sebuah kota di Pulau Kreta. </p>
       <h2> Dimana? </h2>
       <p> Kreta adalah pulau Yunani di Laut Mediterania. </p>
       <h2> Bagaimana? </h2>
       <p> Anda dapat mencapai bandara Chania dari seluruh Eropa. </p>
    </div>
  </div>
</div>

<div class="footer">
 <p> Ubah ukuran jendela browser untuk melihat bagaimana konten merespons pengubahan ukuran. </p>
</div>

</body>
</html>

Gambar Latar Belakang

Gambar latar belakang juga dapat merespons pengubahan ukuran dan penskalaan.

Di sini kami akan menunjukkan tiga metode berbeda:

Jika properti background-size disetel ke “contain”, gambar latar belakang akan diskalakan dan mencoba menyesuaikan dengan area konten. Namun, gambar akan mempertahankan rasio aspeknya (hubungan proporsional antara lebar dan tinggi gambar):

Contoh :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
</style>
</head>
<body>

<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>

<div></div>

</body>
</html>

Jika properti background-size disetel ke “100% 100%”, gambar latar akan melebar untuk menutupi seluruh area konten:

Contoh Kodenya:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>

<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>

<div></div>

</body>
</html>

Jika properti background-size disetel ke “cover”, gambar latar akan diskalakan untuk menutupi seluruh area konten. Perhatikan bahwa nilai “cover” mempertahankan rasio aspek dan beberapa bagian dari gambar latar belakang mungkin terpotong:

Contph Kodenya:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg');
  background-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>

<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>

<div></div>

</body>
</html>

Gambar Berbeda untuk Perangkat Berbeda

Gambar besar bisa jadi sempurna di layar komputer besar, tetapi tidak berguna di perangkat kecil. Mengapa memuat gambar besar saat kita harus memperkecil ukurannya? Untuk mengurangi beban atau karena alasan lain, kita bisa menggunakan kueri media untuk menampilkan gambar yang berbeda pada perangkat yang berbeda.

Berikut ini satu gambar besar dan satu gambar lebih kecil yang akan ditampilkan di perangkat berbeda:

Contoh Kodenya :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body { 
     background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg'); 
  }
}
</style>
</head>
<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

Kita bisa gunakan kueri media min-device-width, bukan min-width yang memeriksa lebar perangkat, bukan lebar browser. Maka gambar tidak akan berubah saat kita mengubah ukuran jendela browser:

Contoh Kodenya :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
     background-image: url('https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg'); 
  }
}
</style>
</head>
<body>

</body>
</html>

Elemen <picture> HTML5

HTML5 memperkenalkan elemen <picture> yang memungkinkan kita untuk menentukan lebih dari satu gambar.

Dukungan Browser

Element	Edge	Chrome	Firefox	Safari	Opera
<picture>	13	38.0	38.0	9.1	25.0

Elemen <picture> berfungsi mirip dengan elemen <video> dan <audio> . Kita menyiapkan sumber yang berbeda dan sumber pertama yang sesuai dengan preferensi adalah yang digunakan:

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<picture>
  <source srcset="https://dosenit.com/wp-content/uploads/2020/10/39a1c4a92c2dc98d7676c2cdb63c2683.jpg" media="(max-width: 400px)">
  <source srcset="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="Flowers" style="width:auto;">
</picture>

<p> Ubah ukuran lebar browser dan gambar latar belakang akan berubah pada 400px. </p>

</body>
</html>