kostenloser Webspace werbefrei: lima-city

Proportional Bild und Textgrösse

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   internetplattform

   internetplattform hat kostenlosen Webspace.

   23:24, 24.3.2017

   hallo zusammen
   
   ich möchte gerne, dass die bilder und texte sich Proportional an den bildschirm ausrichten. das heisst je nach bildschirmgrösse (pc/laptop/smartphone/tablet) die bilder/texte anpassen.
   die texte habe ich hingekriegt im css mit zahl em (zb. 1.2em). kann dies auch für bild verwendet werden. habs mit % versucht bei den bilder, oder gibt es ein besseren befehl?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. erikweb

   erikweb hat kostenlosen Webspace.

   0:38, 25.3.2017

   Hallo,
   benutze doch einfach das hier:
   

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

   
   So mache ich das auf meiner Seite auch. Es gibt aber auch noch viele andere effektivere Möglichkeiten.
   
   Hier findest du eine schöne Übersicht:
   https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/
   
   Ich hoffe ich konnte dir helfen!
4. Autor dieses Themas

   internetplattform

   internetplattform hat kostenlosen Webspace.

   12:21, 25.3.2017

   wird mit " max-width: 100%;" nicht 100% des bild genommen?
   den ich habe zb. ein bild, was 1200 breit ist und ich es nun für eine stelle nur 400breit haben möchte, aber an einer anderen stelle solls 12000breit sein.
   ich möchte aber nicht das bild 2x hochladen.
   
   danke für den link, aber dort komme ich nicht so ganz draus, was die meinen.

5. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   12:50, 25.3.2017

   max-width:100% bedeutet in diesem Fall: maximal 100% des zur Verfügung stehenden Platzes.

6. erikweb

   erikweb hat kostenlosen Webspace.

   19:21, 25.3.2017

   wird mit " max-width: 100%;" nicht 100% des bild genommen?
   den ich habe zb. ein bild, was 1200 breit ist und ich es nun für eine stelle nur 400breit haben möchte, aber an einer anderen stelle solls 12000breit sein.
   ich möchte aber nicht das bild 2x hochladen.

   
   Du kannst doch einfach das hier nehmen:
   
   css:
   

   .img400breit {
     max-width: 100%;
     width:400px;
     height: auto;
   }
   .img12000breit {
     max-width: 100%;
     width:12000px;
     height: auto;
   }

   
   html:
   

   <p><img class="img400breit"   alt="img" src="src"></p>
   <p><img class="img12000breit" alt="img" src="src"></p>

   
   Mit "max-width: 100%;" wird nicht 100% vom Bild genommen, sondern das Bild darf so gesehen maximal nur so breit sein wie der Bildschirm.
   
   Deine normale Breite kannst du dann immer noch mit "width:400px;" oder "width:12000px;" festlegen.
   
   Ich hoffe ich konnte dir helfen!

7. web7

   web7 hat kostenlosen Webspace.

   14:13, 15.4.2017

   Für CSS gibt es eigene "Media Queries" mit denen man abhängig von der Displaygröße verschiedene Regeln definieren kann, z.B.
   
   

   @media only screen and (max-width: 500px) {
       img {
           width: 100%;
       }
   }

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?