3
Breite objekt mit css
Hallo Gemeinschaft,
gibt eine Möglichkeit einen bild 100% breite anzeigen zu lassen max aber nur 350 px
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
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 449398
Url: https://administrator.de/contentid/449398
Printed on: April 23, 2024 at 08:04 o'clock
3 Comments
Latest comment
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
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
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.
~Arano
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; }
}~Arano
