html & css - container ist zu lang, wie kürzen?
hallo,
ich hocke seit einer std und finde es nicht heraus. Wie kann man diesen Container rechts kürzen, sodass es einen gleichmäßigen Rand für das Bild ergibt?
Danke schonmal.
2 Antworten
Sofern der Container als Rahmen für das Bild agieren soll, wäre es die bessere Lösung, dem Bild via CSS einen Rahmen zu geben.
Beispiel:
.image {
border: 16px solid blue;
}
Andernfalls passt die initiale Darstellungsform des Containers nicht. Blockelemente orientieren sich für die Berechnung ihrer Größe an den Elternelementen, nicht ihrem Inhalt.
Man kann nun entweder mit
width: fit-content;
die Containergröße an die Breite der Content-Box anpassen (lies hier mehr dazu) oder stattdessen die Darstellungsform ändern:
<!doctype html>
<head>
<title>Example</title>
<style>
.image-container {
background: blue;
display: inline-block;
padding: 16px;
}
</style>
</head>
<body>
<div class="image-container">
<img alt="..." height="..." src="..." width="...">
</div>
</body>
Die Größe des Containers wird auch hier durch seinen Inhalt (und den Innenabstand) bestimmt. Wenn du nun trotzdem eine (maximale) Breite (max-width / width) vorgeben möchtest, musst du beachten, dass das Bild über den Rand läuft, wenn es größer als der Container sein sollte. Daher wäre es in diesem Fall besser, noch für das Bild eine Skalierung vorzugeben:
.image {
height: auto;
width: 100%;
}
Je Bildschirmbreite / Breite des Containers wird das Bild nun größer/kleiner skalieren (ohne sein ursprüngliches Größenverhältnis zu verlieren).
Das geht entweder mit der Eigenschaft width oder right, zusammen mit position.
.container
{
width: 90%;
}
oder:
.container
{
position: relative;
right: 2em;
}
ich habe es endlich heraus gefunden. Mann bin ich langsam beim lernen
.header-image {
width: 100%;
}
.headline {
color:rgb(0, 255, 225);
}
.image-container {
background-color: rgb(46, 17, 17);
padding: 16px;
width: 50vw;
height: 71vh;
}
bzw
.image-container {
background-color: rgb(46, 17, 17);
padding: 16px;
width: 50vw;
height: 33.4vw;
mit width wird der ganze Container mit dem Inhalt, also ein Bild, kleiner oder größer.
das zweite Beispiel von dir versetzt den ganzen Container mit dem Bild weiter nach links, sodass das Bild links abgeschnitten wird und der linke Anteil verschwindet und alles eben nach links versetzt. Aber wenn ich den Container ganz versetzen könnte, so wie es mir passt, aber ohne das Bild mit zu versetzen, wie bekomme ich das hin? danke dir schonmal :)