Bilder - Desktop und mobile Version

Hallo zusammen,

ich benötige mal wieder eure Hilfe. Und zwar geht es diesmal um eine optimale

Übertragung von Bilder aus der PC-Version in die Version der mobilen Endgeräte.

Die Bilder auf dem Smartphone werden durchweg einfach zu groß dargestellt.

Das wirkt ziemlich überdimensioniert.

Gibt es ein nützliches Plugin oder eine einfache Veränderung im css, um die Bilder

vom Verhältnis her anzugleichen.

Ich kann euch leider nicht die URL geben, aber das css-sheet:

DANKE für eure Hilfe und Zeit

Viele Grüße Drag and Drop

/* Seitenbreite und -einzug
-------------------------------------------------------------- */
#page {
	margin: 2em 2em;
	max-width: 1500px;
}








/* Header
-------------------------------------------------------------- */
#branding img {
	height: auto;
	display: block;
	width: 100%;
  }








/* Seitenleiste
-------------------------------------------------------------- */
#secondary {
   display:none;   
  }








/* Content
-------------------------------------------------------------- */




.singular .entry-content, 
.singular footer.entry-meta, 
.singular #comments-title {
    margin: 0 auto;
    width: 100% !important;
}








/* Schrift
-------------------------------------------------------------- */
a:hover {
	text-decoration: underline !important;
}








/* Bilder
-------------------------------------------------------------- */
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: 0px !important;
    padding: 6px;
    max-width: 97.5%;
    max-width: calc( 100% - 14px );
}








/* Seitenüberschrift
-------------------------------------------------------------- */
.singular .entry-header {
display:none;
	}	








/* CSS-Klassen für Bilder
-------------------------------------------------------------- */
.klasse1:hover {
opacity:0.6;
	}

Danke für die Antwort

Soll ich den Ausschnitt einfach im CSS einfügen?

Wie funktioniert dieser Befehl genau?

Genauer: Mein Problem sind nicht die Bilder im Header. Die passen sich in der mobilen Version

optimal an. Wenn ich jedoch mitten im Text ein Bild einfüge, dann ist dieses im Verhältnis zu groß.

Ich hab mich schon mit Responsive Design beschäftigt und wie ich so mit bekomme habe, gibt es die

Möglichkeit die Bilder einzeln über Klassen und den img-Befehl einzustellen. Ich hab jedoch viele Bilder hochgeladen, die

ich nicht alle einzeln verändern will.

Daher suche ich nach einem Befehl, den ich einfügen kann oder ein geeignetes Plugin, dass die Bilder

kleiner als vorher erscheinen lässt.

Hi Daniel,

Ich hab den Ausschnitt hier eingefügt und die Breite um 50 % reduziert. Hat in der Smartphone-Version

nichts geändert. Hab die Werte auch umgekehrt geändert. Wo liegt das Problem?

/* Bilder
-------------------------------------------------------------- */
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: 0px !important;
padding: 6px;
max-width: 97.5%;
max-width: calc( 100% - 14px );
}

Media (max-width: 440px){
img{width: 50%;}
}

Super der Befehl funktioniert für Bilder perfekt. Danke!

Ich habe auf der Seite auch Flip-Boxen, die mit Bildern zu gepackt sind.

Diese verändern sich nicht und wirken immer noch überdimensionalisiert.

Die Flip-Boxen wurden mit Elementor erstellt. Gibst auch dafür einen Befehl?

Link kann ich momentan leider nicht liefern. Ich melde mich nochmal, wenn ich einen Link zur Verfügung stellen kann.

Trotzdem Danke

Viele Grüße

Drag and Drop

Eines würde ich noch gerne wissen. Es gibt für einzelne Bilder den Befehl [COLOR=#6A6A6A][FONT=arial]img[/FONT][/COLOR][COLOR=#545454][FONT=arial]-[/FONT][/COLOR][COLOR=#6A6A6A][FONT=arial]responsive,

[/FONT][/COLOR]damit diese in der mobilen Version optimal dargestellt werden. Gibt es die Möglichkeit die

[COLOR=#6A6A6A][FONT=arial]Bilder auf eine vorher festgelegte Größe zubringen?

Also rein in Elementor, Bild anklicken, Befehl dem Bild hinzufügen und schon ist die gewünschte Größe in der

Mobilen erreicht?

[/FONT][/COLOR]

Ja Elementor ist ein Page Builder.

Mit Befehl meine ich nur den kleinen Ausschnitt { Text }, der Design... ändert.

Ich habe nun den Befehl mit den einzelnen Bildern auswählen ausprobiert. Klappt bislang nicht. Hab einmal den Titel des Bildes

eingegeben und es auch mit der zugehörigen Endung .jpg .... versucht.

Hab ich da was falsch eingegeben? Habs ganz unten im css platziert.

.entry-content img {
max-width:100%
}

.entry-content img
{startup-bild.png

max-width:50%
}

.entry-content img
{startup bild

max-width:50%
}