CSS Bildgröße an Darstellung auf iPad anpassen

Orpheus · 10. Februar 2015

Hallo, habe inzwischen (als Anfänger) es immerhin hinbekommen, dass im Header meiner Seiten eine media query ein Tablet erkennt und dann eine spezielle ipad.css anspricht. Habe dort die Breite meiner Container etwas vermindert usw., das klappt auch gut. Nur die Bilder gehen jetzt halt über den Rand. Gibt es eine einfache Lösung, die Bilder durch Einträge in der .css PROPORTIONAL zu verkleinern? Bitte um möglichst konkrete Tipps, sonst versteh ich wieder nur die Hälfte ...
Aber jedenfalls schon mal danke an alle hilfreichen Forumteilnehmer ...

Lawnmower · 10. Februar 2015

Wie verkleinern? Arbeite mit einem Responsive Layout, dann brauchst Du solche Hacks wie ipad CSS gar nicht erst. Und es gibt noch andere Tablets und zig andere Bildschirmgrössen ausser iPads; eine Webseite auf 1 Tablet Modell anpassen ist ja wohl das Dümmste; wie früher "Optimized for Internet Explorer".

Der Meta Tag für Viewport hilft vielleicht noch damit die Tablets und Smartphones richtig skalieren:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

SFFox · 10. Februar 2015

Allgemein gilt bei responsive-Webseiten ("responsive" ist ein schönes Wort, das dich bei Google um einige gute Ergebnisse weiter bringen wird), dass man keine feste Höhe/Breite bei Bildern angibt und die Bilder per CSS mit width:100% automatisch zur Seiten-/Bildschirmgröße mit skalieren lässt.
Allerdings ist es schwer so etwas mal eben in eine bestehende Seite zu integrieren, da man normalerweise eine Seite komplett responsive konzipiert, oder eben nicht

Orpheus · 11. Februar 2015

Danke. Da muss ich mich etwas intensiver mit Responsive Layout befassen. Bisher dachte ich, dass es geradezu dazu dient, verschiedene cds-Dateien ins Spiel zu bringen ...
Und zum ersten Beitrag ist anzumerken, dass es in keiner Weise hilfreich ist gesagt zu bekommen, das sei ja nun wirklich "das Dümmste" ... na ja, jeder so, wie er kann ...

Speedy. · 11. Februar 2015

Gibt es eine einfache Lösung, die Bilder durch Einträge in der .css PROPORTIONAL zu verkleinern?

Ja. Der folgende Code sorgt dafür, dass das Bild immer 100% der verfügbaren Breite einnimmt. Durch die dritte Zeile bleibt es dann proportional, verändert also seine Höhe entsprechend. Durch display: block wird das Bild als Blockelement gesetzt und verhält sich dann wie ein <p> oder <h1> (nimmt automatisch die gesamte Seitenbreite für sich ein).

Code:

img {
  max-width:100% !important;
  height:auto;
  display:block;
}

Bisher dachte ich, dass es geradezu dazu dient, verschiedene cds-Dateien ins Spiel zu bringen ...

Nein, im Gegenteil. Es sollten immer so wenig externe Dateien wie nur möglich geladen werden. Im Idealfall hast du nur ein Stylesheet und nur ein JavaScript, dass klappt aber meist nicht (z. B. wenn du Google Fonts einbindest).

Deine Media Queries kommen alle in ein Stylesheet, zu dem ganzen Rest. Definere sie so:

Code:

h1 {
  color: black;
}

.a-class {
  width: 100%;
}

img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* first media query */
@media (max-width: 20rem) {
  .a-class {
    width: 50%;
    float: left;
  }
}

/* etc... */

PS: noch ein Tipp. Wenn du Englisch kannst, dann suche auf Google in Englisch. Das liefert deutlich bessere, aktuellere und saubere Ergebnisse als in Deutsch. Stackoverflow z. B. ist richtig geil.
Hier noch ein Link zum Lernen: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries

Daaron · 11. Februar 2015

Orpheus schrieb:
Danke. Da muss ich mich etwas intensiver mit Responsive Layout befassen. Bisher dachte ich, dass es geradezu dazu dient, verschiedene cds-Dateien ins Spiel zu bringen ...

Nö, das ist nur ein Nebeneffekt. Man KANN es so machen, man SOLLTE aber auf keinen Fall darauf zurück greifen. Wenn möglich, sollten alle CSS-Deklarationen in eine große Datei.... außer man hat ein cleveres CMS, dass aus einzelnen Stylesheets eine zusammengefasste Deklaration erzeugen kann.

Aber ich muss Lawnmower definitiv zustimmen: Es ist dämlich, auf eine spezifische Device zu optimieren. Was machst du in 2-3 Jahren, wenn diese spezifische Device kaum noch Marktanteile hat, das Nachfolgermodell aber etwas breiter oder schmaler ist?

Es gibt 2 sinnvolle Wege für Responsive Design: Entweder, du fängst mit einer Desktop/Fullscreen - Version an und setzt nach unten hin Break Points, oder du beginnst bei einer Minimalauflösung (unter 280px dürfte nix existieren) und setzt die Break Points mit wachsender Auflösung. Du wirst eh kaum drum herum kommen, auch die vertikale Auflösung in Betracht zu ziehen, und manchmal musst du schlichtweg raten. Es gibt z.B. keinen Media Query für "Touch". Da musst du dir was anderes einfallen lassen.

Orpheus · 11. Februar 2015

Also, ihr habt mir sehr geholfen. Ein Stück bin ich weitergekommen. Ich will ja auch nur bescheidene Ansprüche erfüllen und meine Homepage hat nur 10 Seiten ... aber ich versuche mal, mich näher einzuarbeiten. Danke also an alle ...

Suche

CSS Bildgröße an Darstellung auf iPad anpassen

Orpheus

Cadet 1st Year

Lawnmower

Maître de cuisine

SFFox

Lt. Commander

Orpheus

Cadet 1st Year

Speedy.

Gast

Daaron

Fleet Admiral

Orpheus

Cadet 1st Year

Ähnliche Themen