Bild im HTML/CSS verrutscht seitlich?
Hallo,
ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.
Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.
Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.
Also habe ich mir diesen Code hier ausgedacht:
<html>
<head>
<style>
#example {
box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
/*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
margin-left: -10vw;
margin-right: -10vw;
margin-top: 0px;
margin-bottom: 6vh;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 0px;
padding-bottom: 0px;
boarder-left: 0px;
boarder-right: 0px;
boarder-top: 0px;
boarder-bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 2vh;
left: 0px;
}
</style>
</head>
<body>
<div id="example">
<img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>
</body>
Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.
Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.
Woran liegt das und wie kann ich das vermeiden?
(Firefox Dev-Edition 66.0b1 (64-bit))
5 Antworten
Vielleicht solltest du für den IMG-Tag keine Viewport-Sizes verwenden. Arbeite Responsive, ergo in Prozent und setze vielleicht eine max-height & max-width Angabe. Zudem suchst du wohl eher den "border"-Tag, einen "boArder"-Tag gibt es meines Wissens nicht und beträgt dieser 0px/0%, etc. ist dieser ohnehin unwirksam.
Außerdem ist dein IMG-Tag fehlerhaft - hier, einmal korrigiert:
<div id="example">
<img src="https://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpg" style="width: 100px; height: 100px;"/>
</div>
Glaube es oder nicht, ich habe das img-Tag schon richtig gehabt, aber guteFrage hat es mir trotz dreifachen Editieren nicht möglich gemacht, dass das richtig war, da wurden immer wieder pg hinter jpg hinzugefügt und =" entfernt.
Egal,
Danke für den boArder-Hinweis. Du hast natütlich recht, aber das war noch nicht das Problem.
Mit vw und vh kann man doch Prozentual arbeiten, man weiß eben nur worauf sich das Prozent bezieht (Umgebungselement oder Screen, Höhe oder Breite ...)
Danke
Vielleicht solltest du für den IMG-Tag keine Viewport-Sizes verwenden. Arbeite Responsive,
vW und vH sind relative Einheiten.
Mein Problem war wohl, dass alle möglichen Browser, für alle möglichen Komponenten in Wechselwirkung irgendwelche Abstände als Default haben.
Beim exakten platzieren von Elementen nervt das unheimlich, da es zu vollkommen unvorhersehbaren Effekten führt.
So stand das irgendwo im Internet und drunter ein Code-Schnipsel, mit dem ich ab jetzt jedes CSS anfangen werde (das hat bei mir noch mindestens 2 andere offene Probleme beseitigt.)
Hiermiet werden alle Abstände, zwischen allen Elementen, pauschal und immer auf 0 gesetzt. Wenn man das oben, als allererste CSS-Regel einbaut, dann sind diese Probleme alle weg. Dass man natürlich weiter unten alle Abstände neu und selbst definieren kann, das bleibt davon unbenommen
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes: "" "";}
input,textarea{font-family:monospace;}
html{-webkit-text-size-adjust:100%;}
Solche Effekte sind mir auch schon aufgefallen.😢
Danke für die Init Werte
ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.
Wenn es über die volle Breite geht, wie soll man dann einen Farbverlauf sehen?
Ansonsten:
<!doctype html>
<title>Bild in HTML</title>
<style>
body {
padding:0;
margin:0;
}
#example {
background:url(https://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpg) no-repeat center center;
background-size:cover;
width:100vW;
height:100vH
}
</style>
<div id="example"></div>
Alex
Wenn ich jetzt richtig verstanden habe, was Du willst, geht das so:
<!doctype html>
<title>Element Einpassen</title>
<style>
body {
margin:0;
padding:0;
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%);
}
#outer {
width:100vW;
height:auto;
text-align:center;
overflow:hidden
}
#inner {
height:100vH;
width:auto;
}
img {
max-width:100%;
max-height:100%
}
</style>
<div id="outer">
<div id="inner"><img srhttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgjpg" alt=""></div>
</div>
Diese Seite kommt wohl nicht so richtig mit Code klar ...
/* CSS */
#example {
box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
/*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
margin-left: -10vw;
margin-right: -10vw;
margin-top: 0px;
margin-bottom: 6vh;
padding-left: 10vw;
padding-right: 10vw;
padding-top: 0px;
padding-bottom: 0px;
boarder-left: 0px;
boarder-right: 0px;
boarder-top: 0px;
boarder-bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 2vh;
left: 0px;
}
<!-- HTML -->
<div id="example">
<img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>
Evtl. ist es das, was Du willst?
<!doctype html>
<title>Bild in HTML</title>
<style>
body {
margin:0;
padding:0;
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%);
}
#example {
width:100vW;
height:100vH;
background:url(https://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpg) center center no-repeat ;
background-size:contain
}
</style>
<div id="example"></div>
Alex
Als Hintergrund kann ich das Bild leider nicht machen, da das Bild im ungekürzten Umfeld eine Galerie mit Bedienelementen ist und das im Hintergrund nicht funktioniert.
Man sieht den Hintergrund, wenn man das Handy auf Breitbild dreht, das Bild soll immer volle Höhe oder volle Breite haben und quadratisch sein, aber im Breitbild sieht man den Bereich dahinter eben.
Das kannte ich bisher auch nur, um Leute vom Bilder-Klau abzuhalten.
Bei deinem Code sehe ich jetzt gerade gar nicht, wo der Farbverlauf ist.