Wie man ein Bild reaktionsfähig innerhalb eines div macht

8

Mein Code ist wie folgt:

%Vor%

Wie kann ich das Bild für Mobile (360X640px) und iPad (768X1024px) ansprechen? Können Sie mir bitte den CSS Code geben?

Ich muss zwei Bilder in Mobile und vier in iPad in einer Zeile geben !!

    
Kusumakar Pant 11.07.2014, 10:51
quelle

7 Antworten

20

Hier ist der Code, den Sie befolgen müssen:

%Vor%

Siehe: Ссылка

    
Sulthan Allaudeen 11.07.2014 10:55
quelle
1

Entfernen Sie width und height Attribut von img tag und fügen Sie in die CSS-Datei für dieses Bild max-width:100%; width:100%;

ein     
Anon 11.07.2014 10:58
quelle
1

Stellen Sie Breite und Höhe in Prozent ein

%Vor%

Verwenden Sie die Medienabfrage

/ * Landschaft * /

%Vor%

/ * Hochformat (d. h. schmales Ansichtsfenster) * /

%Vor%     
Arunkumar 11.07.2014 10:53
quelle
1

Mit Medienabfrage können Sie die Bilder beliebig teilen.

%Vor%

DEMO

    
Suresh Ponnukalai 11.07.2014 11:13
quelle
1
___ answer24696097 ___

Entfernen Sie %code% und %code% Attribut von %code% tag und fügen Sie in die CSS-Datei für dieses Bild %code%

ein     
___ answer24696059 ___

Hier ist der Code, den Sie befolgen müssen:

%Vor%

Siehe: Ссылка

    
___ qstntxt ___

Mein Code ist wie folgt:

%Vor%

Wie kann ich das Bild für Mobile (360X640px) und iPad (768X1024px) ansprechen? Können Sie mir bitte den CSS Code geben?

Ich muss zwei Bilder in Mobile und vier in iPad in einer Zeile geben !!

    
___ answer24696363 ___

Mit Medienabfrage können Sie die Bilder beliebig teilen.

%Vor%

DEMO

    
___ antwort43310943 ___

Setzen Sie das Bild, das Sie als Hintergrundbild in einem div festlegen möchten, und geben Sie die Hintergrundgröße als Cover an

%Vor%     
___ qstnhdr ___ Wie man ein Bild reaktionsfähig innerhalb eines div macht ___ answer24696359 ___
%Vor%

Sie können den Rahmen entfernen.

Wenn Sie den Rahmen entfernen, können Sie die Breite 25% für 4 Zeilen in einer Zeile und 50% für 2 Zeilen in einer Zeile verwenden.

    
___ tag123css ___ CSS (Cascading Style Sheets) ist eine Darstellungsstilsprache, die das Aussehen und die Formatierung von HTML (Hyper Text Markup Language), XML-Dokumenten (Extensible Markup Language) und SVG-Elementen einschließlich (aber nicht beschränkt auf) Farben beschreibt. Layout, Schriftarten und Animationen. ___ answer24696844 ___
%Vor%

Demo

    
___ tag123responsivedesign ___ Responsive Webdesign (RWD) ist ein Ansatz für Webdesign und -entwicklung, der darauf abzielt, Websites so zu gestalten, dass sie auf der Grundlage von Bildschirmgröße, Plattform und Ausrichtung optimale Erlebnisse für eine Vielzahl von Geräten bieten. ___ answer24696029 ___

Stellen Sie Breite und Höhe in Prozent ein

%Vor%

Verwenden Sie die Medienabfrage

/ * Landschaft * /

%Vor%

/ * Hochformat (d. h. schmales Ansichtsfenster) * /

%Vor%     
___ tag123image ___ Das Bild-Tag ist für Fragen im Zusammenhang mit dem Laden, Formatieren, Speichern, Komprimieren und Anzeigen von Bildern im Kontext des Quellcodes gedacht. Dieses Tag sollte auch zur Unterstützung verschiedener Bildbibliotheken verwendet werden. Fragen zu bestimmten Bildformaten sollten die Tags für diese Formate enthalten. ___
Naseeruddin V N 09.04.2017 19:27
quelle
0
%Vor%

Sie können den Rahmen entfernen.

Wenn Sie den Rahmen entfernen, können Sie die Breite 25% für 4 Zeilen in einer Zeile und 50% für 2 Zeilen in einer Zeile verwenden.

    
Subrata Mallik 11.07.2014 11:12
quelle
0
%Vor%

Demo

    
Maulik Patel 11.07.2014 11:39
quelle

Tags und Links