kickflip
Goto Top

HTML und CSS - Bild dynamisch in einer div zentrieren

Hi,

ich möchte ein Bild dynamisch in einer div so zentrieren, dass die Bildbreite immer der Breite des divs entspricht, welche ja immer 60% der Websitenbreite entspricht. Die Bildhöhe soll sich dabei immer dynamisch anpassen. und durch Hidden nicht angezeigt werden.
Eigentlich sollte das einfach sein, aber irgendwie funktioniert das so nicht, wie ich das will... möchte das eigentlich so gut es geht in CSS lösen.

Weiß nicht genau, was ich jetzt dem Bild sagen muss, damit es das tut, was ich möchte.

HTML:

div id="div_pic01" style="overflow: hidden; width: 60%; height: 200px">    
           <a href="www.google.de"> <img id="pic01" src="1.jpg" alt="alternativer_text"/> </a>   
</div>


CSS:

#div_pic01{
  text-align: left;
  margin: 0 auto;  
}
#pic01{
    ????
}

Gruß,

Kickflip

Content-Key: 536857

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

Ausgedruckt am: 28.03.2024 um 22:03 Uhr

Mitglied: RedExplosion
RedExplosion 19.01.2020 aktualisiert um 00:21:55 Uhr
Goto Top
<style>
#div_pic01{
    text-align: left;
    margin: 0 auto;  
}
#pic01{
    width: 100%;
    height: 100%;
}
</style>

<div id="div_pic01" style="overflow: hidden; width: 60%; height: 200px">   
    <a href="www.google.de"> <img id="pic01" src="1.jpg" alt="alternativer_text"> </a>  
</div>
aber du könntest auch da du eh für den div eine id vergeben hast das overflow etc auch oben beim style mit reinpacken

Gruß RedExplosion
Mitglied: Kickflip
Kickflip 19.01.2020 um 12:23:44 Uhr
Goto Top
Danke dir.

Zwei Fragen habe ich noch:

  • Wie mache ich das, dass das Bild genau zentriert in der Div angezeigt wird?
  • Wie mache ich das, dass ein Text angezeigt wird, wenn ich mit der Maus über den div Bereich fahre?
Mitglied: RedExplosion
RedExplosion 19.01.2020 aktualisiert um 12:51:23 Uhr
Goto Top
<style>
#div_pic01{
    text-align: center;
    margin: 0 auto;
    overflow: hidden; 
    width: 60%; 
    height: 200px;
}
#pic01{
    height: 100%;
}
</style>

<div id="div_pic01" title="Google">    
    <a href="https://www.google.de"> <img id="pic01" src="1.jpg" alt="alternativer_text"> </a>   
</div>
hoffe das es deine fragen beantwortet
Mitglied: Kickflip
Kickflip 19.01.2020 um 20:18:58 Uhr
Goto Top
Ne, nicht so wirklich :D
Mitglied: RedExplosion
RedExplosion 19.01.2020 um 20:27:59 Uhr
Goto Top
Was genau ist denn deine Frage?
Mitglied: cnelke
cnelke 20.01.2020 um 07:05:14 Uhr
Goto Top
Ich würde es so machen:

<style>
#div_pic01{
    text-align: center;
    margin: 0 auto;
    width: 60%; 
    height: 200px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#pic01{
    vertical-align: middle;
    overflow: hidden;
    height: 100%;
}
</style>

<div id="div_pic01" title="Google">   
   <span class="helper"></span><a href="https://www.google.de"> <img id="pic01" src="1.jpg" alt="alternativer_text"> </a>  
</div>