Image Größe verkleinern ohne Height?

strong97 · 1. Dezember 2015

Guten Tag,

habe mal ne Frage unzwar kann man von einem Bild die Größe verändern ohne Height?

Ich möchte grad eine Box Responsive machen, hat geklappt nur das Bild ist einfach zu groß. Hier mal ein Überblick wie es ist:

So ist es in (<= 480px)

[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/mypzdjctpu4g3.png]

Ich würde es gerne so haben das, dass Bild noch kleinerer wird.

Mein Code ist grad so:

CSS

@media screen and (max-width:480px) {




article.box {
width:auto;
margin:1em;
}




article.box img {
Hier fällt mir nichts ein wie ich es ändern könnte. Oben ist schon ein Image Tag definiert unzwar so: ( img { height: auto; max-width: 100%; } 
}




}

Alles anzeigen

MrMurphy · 3. Dezember 2015

Hallo

zunächst ein Hinweis: Das Bild sollte nur in der Größe bereitgestellt werden, in der es maximal erscheinen soll. Das ist guter Stil und erspart den Besuchern Traffic.

Als zusätzlichen Nebeneffekt brauchst du dich im Regelfall dann auch nicht mehr um die Media-Queries zu kümmern sondern kannst außerhalb der Media-Queries (oder in Media-Queries, die für alle Bildschirmgrößen gelten) folgende CSS-Angaben anwenden:

CSS

img {
         max-width: 100%;
         max-height: 100vh;
      }

Ich benutze gerne zusätzlich display:block um die Zwangsabstände um das Bild zu verhindern, also

CSS

img {
         display: block;
         max-width: 100%;
         max-height: 100vh;
      }

Gruss

MrMurphy

Image Größe verkleinern ohne Height?

Jetzt mitmachen!

Teilen