6
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:
CSS:
Gruß,
Kickflip
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
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: 536857
Url: https://administrator.de/contentid/536857
Printed on: April 18, 2024 at 23:04 o'clock
6 Comments
Latest comment
<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>Gruß RedExplosion
Danke dir.
Zwei Fragen habe ich noch:
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?
<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>
Ne, nicht so wirklich :D
Was genau ist denn deine Frage?
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>
