Print this page
Tutorial Membuat Responsive Image dengan CSS - Pada dunia per-website-an maksud dari Responsive adalah sebuah teknik yang digunakan agar layout website dapat menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya, So tampilan yang berada di desktop komputer dengan tampilan yang diakses melalui smartphone misalnya, itu akan berbeda tampilannya. Untuk tes tampilan yang menggunakan teknik Responsive tersebut, kamu tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser kamu saja ke dalam ukuran mobile device yang di inginkan, jika website tersebut responsive, maka kamu dapat melihat tampilan layout website pada browser akan mengecil ataupun membesar sesuai ukuran browser.
Nah tapi kadang sering saya temukan kasus tampilan atau layout website dapat berubah, namun tidak pada gambar/image yang terdapat dalam website, kenapa hal tersebut dapat terjadi? Menurut saya meskipun kamu telah membuat skrip untuk layout website, tapi skrip itu tidak berlaku bagi image tersebut.
Pada artikel Membuat Responsive Image dengan CSS kali ini saya akan memberikan tutorial membuat image menjadi responsive, so what we need?
1. Siapkan gambar yang ingin di resize
Tenang, gambar dan skripnya sudah saya siapkan dan nanti bisa di download di akhir artikel
2. Buat Skrip untuk Resize Menggunakan Width Property
<!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="image.jpg" width="460" height="345">
<p>Minimaze browsernya dan kamu akan melihat size gambar ikut berubah</p>
</body>
</html>
saya menggunakan width, jika width saya set menjadi 100% , gambar akan responsive dan ukuran berubah.
3. Buat Skrip untuk Resize Menggunakan Max-Width Property
<!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="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image wil scale when the width is less than 460px.</p>
</body>
</html>
4. Buat Skrip untuk Resize pada Image Background
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100%;
height: 700px;
background-image: url('image.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Resize browsernya, maka kamu akan melihat skala gambar background berubah</p>
<div></div>
</body>
</html>
Jika background-Size di set menjadi "100% 100%", maka gambar background akan merentang untuk menutupi seluruh konten area
Ok, cukup mudah kan ternyata? tidak seperti membuat responsive layout website dengan menambahkan banyak atribut, ternyata membuat gambar menjadi responsive lebih mudah
sekian Tutorial Membuat Responsive Image dengan CSS dari saya, semoga bermanfaat
Download
keren nih izin praktek yah gan
ReplyDeleteDalam mengoptimalkan keberhasilan sebuah situs, tujuan membuat desain web responsif tidak boleh diabaikan. Dengan meningkatkan aksesibilitas, menciptakan pengalaman pengguna yang konsisten, menyederhanakan pengelolaan konten, mendukung strategi SEO, dan beradaptasi dengan perkembangan teknologi, desain web responsif menjadi fondasi yang kokoh untuk mencapai tujuan bisnis dan memberikan layanan yang berkualitas kepada pengguna.
Deletemanfaat membuat desain web responsif tidak dapat diabaikan. Dari aksesibilitas universal, pengalaman pengguna konsisten, hingga peningkatan retensi pengguna, desain web responsif adalah investasi yang cerdas bagi perkembangan dan keberlanjutan suatu situs.
mengakui dan memanfaatkan keunggulan membuat desain web responsif adalah langkah yang tak terelakkan. Dari penyesuaian otomatis hingga penghematan waktu dan sumber daya, desain web responsif menjadi landasan yang kuat untuk mencapai tujuan bisnis online.
nuhun dulur
ReplyDeleteMantap juragan, trims ilmunya
ReplyDeleteBimbelpro.com
Terimakasih bro, sangat bermanfaat:)
ReplyDeleteGan ketika saya masukan ke salah satu gambar saja, ko berpengaruh ke semua nya ya ?? Mohon solusi nya gan.
ReplyDeleteKalau beberapa gambar pada tampilan desktop tersusun 4 kolom seperti galery, agar di tampilan mobile bisa jadi 1 kolom full halaman gimana scriptnya ya ?
ReplyDelete.
mantap ilmu nya, makasih yah
ReplyDelete