Bild dynamisch in div vertikal und horizontal 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:

    Code
    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:

    Code
    #div_pic01{
      text-align: left;
      margin: 0 auto;  
    }
    
    #pic01{
        ????
    }


    Gruß,


    Kickflip

  • Verstehe dich nicht ganz was das soll.

    Ein div 60 Prozent Breite geben und mittig stellen ist kein Problem.

    Dass es responsiv ist es auch kein Problem.

    Du nutzt aber eine feste Höhe von 200px;

    Das heißt das alles im overflow:hidden verschwindet.

    Ein height: Auto geben wäre sinnvoller.

    * Link entfernt, weil existiert nicht mehr *

    Guck mal hier und ändere das height: 200px auf Auto , ob das Er passt, was du willst.

    Du könntest aber auch mal ein Link zum Bild schicken und sagen, wo es eingebunden werden soll, dann können wir dir vielleicht bessere Ideen geben.

  • Danke! Das ist genau das was ich suche, aber das Bild soll immer horizontal und vertikal im "Rahmen" zentriert sein. Bei dir sieht man ja oben nur den Himmel. Die Mitte wäre ja, dass man auch ein bisschen grün sieht... weißt du was ich meine? :)


    und: meinte schon fixes 200px

  • Und eine 2. Frage, neben der im Beitrag über hier, hätte ich zudem noch:


    ich möchte, wenn ich über das Bild oder den div hover einen Text anzeigen lassen.


    das funktioniert irgendwie nicht... habe das bislang so:


    HTML:


    Code
    <div id="div_pic01">
            <a href="www.google.de"> 
                  <img  src="1.jpg" alt="alternativer_text">
            </a>  
            <p id="text_pic01">ANGEZEIGTER TEXT BEIM HOOVERN</p>
    </div>


    CSS:

    Code
    #text_pic01{  
        position: relative;
        top: 50%;
        left:50%;
        visibility:hidden
    }
    
    #div_pic01:hover .text_pic08{
       visibility:visible;   
    }
  • Geht schon, aber wenn du das komplette Bild sehen willst und das Fenster auseinander ziehen tust, dann wird das Bild gestreckt.

    Für das optimale Bild muss man width oder height auf Auto stellen.

    Mit Hover und volle breite und Höhe sehe es so aus

    * Link entfernt, weil existiert nicht mehr *

  • Hm, das mit dem Text hat mir auf jeden Fall schonmal gut geholfen. :) Danke


    Aber das andere soll schon so sein, dass das Bild dann nur als Ausschnitt gezeigt wird und je nachdem wie das Fenster gezogen wird mehr oder weniger sichtbar wird. Aber das Bild soll immer von der Mitte aus skalieren und nicht nicht von oben, wie das ist, wenn man bei


    Code
    img{
      width: 100%;
      height: auto;
    }


    einstellen. Das muss doch lösbar sein :)

  • Bei mir funktioniert das mit dem Text nicht :(

    Der Text wird auch von dem blur-Fliter angegriffen und ist deswegen verschwommen. Das soll nicht so sein



    HMTL:

    Code
    <div id="div_pic01"> 
              <figure id="fig_pic01">
                   <a href="bild01/bild01.html"> 
                     <img  src="bild01/01.jpg" alt="alternativer_text">
                     <figcaption id="figcaption_pic01">
                         Pizza und so BLA BLA BLA
                     </figcaption>
                   </a> 
              </figure>  
    </div>



    CSS:

  • Zitat

    Bei mir funktioniert das mit dem Text nicht

    Text? Möglicher Weise ein Missverständnis, mein Hinweis mit object-fit bezog sich auf das Bild:

    Zitat

    Aber das andere soll schon so sein, dass das Bild dann nur als Ausschnitt gezeigt wird und je nachdem wie das Fenster gezogen wird mehr oder weniger sichtbar wird.

  • Hi Sempervivum,


    wenn ich in meinem code:


    Code
    #div_pic01 a img{
        object-fit: cover;
        object-position: 50% 50%;
        width: 100%;     
    }

    dann ändert sich gar nichts...

  • Man muss dem Bild sowohl Breite als auch Höhe zuweisen, damit der Browser weiß, woran er es anpassen soll:


    https://codepen.io/Sempervivum/pen/KKwrdGB?editors=1100

    Wow! So soll es aussehen. Das versuche ich jetzt mal bei mir einzupflegen. Entschuldigt meine Dümmlichkeit, aber ich bin erst vor 3 Tagen mit HTML und CSS gestartet. :)


    Weiß jemand aus dem Stegreif, wie das mit dem Blur-Filter beim hovern ist und dem Text, der angezeigt werden soll, aber vor dem verschwommenen Bild.


    also mit


    CSS:

  • Dann gebe hier Position: relative dazu

    Code
    figure:hover figcaption{
        transition:1s all;
        margin-top:-100px;
        position:relative;
    }

    UND füge die CSS dazu

    Code
    figure:hover img{
        filter: blur(2px)   
    }

    * Link entfernt, weil existiert nicht mehr *

  • Danke danke danke!


    Was genau macht jetzt das position: relative?


    Und das mit dem blur hatte ich auf die komplette div bezogen. Das blurred natürlich die komplette div :D

    Mit dem speziellen "..img{ ..}" bezieht sich das anscheinend nur auf das Bild.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!