masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > Bagaimana untuk menentukan URL imej untuk digunakan dalam situasi berbeza dalam HTML?

Bagaimana untuk menentukan URL imej untuk digunakan dalam situasi berbeza dalam HTML?

WBOY
Lepaskan： 2023-08-26 23:21:12
ke hadapan
1132 orang telah melayarinya

Bagaimana untuk menentukan URL imej untuk digunakan dalam situasi berbeza dalam HTML?

Gunakan atribut srcset untuk menentukan URL imej untuk digunakan dalam situasi berbeza dalam HTML.

Contoh h2>

Anda boleh cuba jalankan kod berikut untuk melaksanakan atribut srcset. Ubah saiz pelayar anda untuk melihat imej yang berbeza dimuatkan -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
   </head>
   <body>
      <picture>
         <source media = "(min-width: 550px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
         <source media = "(min-width: 400px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg">
         <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "Tutorials Library" style = "width:auto;">
      </picture>
   </body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menentukan URL imej untuk digunakan dalam situasi berbeza dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
url imej html Tentukan imej dalam situasi yang berbeza Pengaturcaraan url imej
sumber：tutorialspoint.com
Artikel sebelumnya：Mendedahkan Kedalaman Reka Bentuk, Bahagian 1 Artikel seterusnya：Dalam HTML5, bagaimanakah kita memaparkan kandungan utama dokumen?
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Menggunakan Grid untuk Mencipta Reka Bentuk Khusus Ini: Panduan Langkah demi Langkah Saya cuba membuat reka letak yang serupa dengan imej ini, saya telah cuba menggunakan grid...
daripada 2024-04-06 20:29:08
0
2
492
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...
daripada 2024-04-06 16:54:10
0
1
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan