Bild im HTML/CSS verrutscht seitlich?

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
Haituga
05.02.2019, 12:37

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>
Woher ich das weiß:Hobby
EinAlexander  05.02.2019, 12:57
Vielleicht solltest du für den IMG-Tag keine Viewport-Sizes verwenden. Arbeite Responsive,

vW und vH sind relative Einheiten.

1
anarky84666 
Fragesteller
 05.02.2019, 13:28

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

2
anarky84666
06.02.2019, 13:20

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%;}
Woher ich das weiß:Berufserfahrung
NackterGerd  07.02.2019, 09:19

Solche Effekte sind mir auch schon aufgefallen.😢

Danke für die Init Werte

0
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
05.02.2019, 12:42
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
anarky84666 
Fragesteller
 05.02.2019, 13:33

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.

0
EinAlexander  05.02.2019, 16:21
@anarky84666

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>
1
anarky84666
05.02.2019, 12:28

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>
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
05.02.2019, 12:58

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