Breite objekt mit css

Hallo Gemeinschaft,

gibt eine Möglichkeit einen bild 100% breite anzeigen zu lassen max aber nur 350 px

<div class="oben">  
  <img src="image/header.jpg" ></div>  

das bild ist 650 breit - wenn ich es im iphone anzeigen lassen möchte, dann sollte es nur 350 px breit sein

auf anderen bildschirmen waere toll, wenn es 600px waeren

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 449398

Url: https://administrator.de/contentid/449398

Ausgedruckt am: 21.11.2024 um 21:11 Uhr

3 Kommentare

Neuester Kommentar

Hi,

und wenn es ein Samsung S5 ist? S7? A5, HTC,Huawai,Nokia, Tablet 7", 8", 10", Landscape, Portrait,... ;)
css4you - max-width

Und dann wäre da noch das Stichwort: "Responsive Design"
bzw. w3schools - Media Queries

Das sollte dir weiterhelfen.

~Arano

hi arano,

lieben dank

wie würdest du es machen, dass ich anderes layout nehemn möchte in anhängigkeit der bildschirmgrösse

also alles was grösser als 600 ist, dass dann links und rechts neben dem hauptcontainer noch div right und div left kommt mit inhalten

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>  

</body>
</html>

Hallo.

Als erstes musst du vielleicht deine Inhalte neu organisieren: Ich z.B. hasse es wenn auf kleinen Geräten Infos einfach weggelassen werden. Bzw. Wenn es Infos gibt die man "weglassen" kann, sind die dann relevant ?

Deine DIV#right und DIV'left sollten also IMMER da sein oder komplett gelöscht werden.
(Mann kann sie natürlich auch als "Menü zusammenpacken". o.ä.; dann sind sie noch da aber in kompakter Form)

Und dann schaust du noch mal auf den w3school-Link den ich dir schon gab, denn dort wird die mit Beispielen gezeigt wie du ein responsive Design erstellst. Sogar mit 600px. Hier solltest du also alles nötige finden.
Lies, lies noch mal und dann probiere aus.
Und dann schaust du noch mal auf den w3school-Link den ich dir schon gab, denn dort wird die mit Beispielen gezeigt wie du ein responsive Design erstellst. Sogar mit 600px. Hier solltest du also alles nötige finden.
Lies, lies noch mal und dann probiere aus.

body { background-color: lightgreen;}
div#right { display:none; }

@media only screen and (max-width: 600px)
{
  body { background-color: lightblue; }
  div#right { display:block; }
}