Wieso ändert sich bei height und width nur die Position des Elements?
Hallo zusammen,
ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).
Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?
Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.
Der Code bei CSS:
.Slider{
width: 800px;
height: 500px;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
HTML-Code (ein Teil):
<div class="Slider">
<div class="Slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slidefirst">
<img src="..." alt="" width="160" height="145"/>
</div>
<div class="slidesecond">
<img src="..." alt="" width="160" height="145"/>
</div>
<div class="slidethird">
<img src="..." alt="" width="160" height="145"/>
</div>
<div class="navigation auto">
<div class="auto-btn-1"></div>
<div class="auto-btn-2"></div>
<div class="auto-btn-3"></div>
</div>
2 Antworten
Die Änderung der Properties height und width in .Slider bewirkt durchaus eine Größenänderung des Sliders. Du solltest jedoch bedenken, dass dies den Gesamtcontainer betrifft und der sich aufgrund des justify-content-Properties horizontal stets zentriert. Die Bilder skalieren nicht automatisch hoch.
Um dieses Verhalten visuell sichtbar zu machen, würde ich empfehlen, eine Hintergrundfarbe (background-color) in die CSS-Regel zu setzen.
Wenn nun die einzelnen Bilder auf die Containergröße gebracht werden sollen, wäre eine weitere CSS-Regel notwendig.
Beispiel:
.Slider img {
height: auto;
width: 100%;
}
Bedenke hierbei, dass die HTML-Attribute (width, height) das initiale Bildverhältnis definieren. Der Browser wird dieses Bildverhältnis beim Skalieren beibehalten.
Der Slider wird grösser, bloss halt die Inhalte darin nicht.