Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Wie kann die URL eines Bildes angegeben werden, das in verschiedenen Situationen in HTML verwendet werden soll?

Wie kann die URL eines Bildes angegeben werden, das in verschiedenen Situationen in HTML verwendet werden soll?

WBOY
Freigeben： 2023-08-26 23:21:12
nach vorne
1151 Leute haben es durchsucht

Wie kann die URL eines Bildes angegeben werden, das in verschiedenen Situationen in HTML verwendet werden soll?

Verwenden Sie das Attribut srcset, um die URL eines Bildes anzugeben, das in verschiedenen Situationen in HTML verwendet werden soll.

Beispiel h2>

Sie können versuchen, den folgenden Code auszuführen, um das Attribut srcset zu implementieren. Ändern Sie die Größe Ihres Browsers, um zu sehen, wie verschiedene Bilder geladen werden -

<!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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann die URL eines Bildes angegeben werden, das in verschiedenen Situationen in HTML verwendet werden soll?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
html图像url 指定不同情况下的图像 图像url编程
Quelle：tutorialspoint.com
Vorheriger Artikel：Die Tiefe des Designs offenbaren, Teil 1 Nächster Artikel：Wie zeigen wir in HTML5 den Hauptinhalt des Dokuments an?
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
Erstellen dieses speziellen Designs mithilfe eines Rasters: eine Schritt-für-Schritt-Anleitung Ich versuche, ein Layout zu erstellen, das diesem Bild ähnelt. Ich habe versucht, dieses R...
Aus 2024-04-06 20:29:08
0
2
492
So verwenden Sie Laravel-Komponenten mit Livewire-Lazy-Platzhaltern Ich möchte das Skelett meiner Laravel-Komponente in einen Livewire3-Platzhalter einfügen. ...
Aus 2024-04-06 20:02:10
0
2
543
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Die Statusaktualisierung funktioniert in React-Native auf Android nicht Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn ...
Aus 2024-04-06 16:54:10
0
1
410
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage