Jump to content

matth921104

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by matth921104

    Introduce Yourself

    in General

    Posted

    On 3/1/2021 at 2:43 PM, ADAM22 said:

    Hi I am Adam from Germany. I am a high school student.  After school I am learning web development and content writing. I make my website with my own coding longboardpro.com. I know its not got but I am a beginner 😬 I will learn it one day I will a good web developer.

    Like your website Adam. Great way to learn web developing by creating a website around something you're interested in. :good:

    Getting an image to fit its container.

    in CSS

    Posted

    Hi there everyone. :D

    I'm making a tribute page for my favorite band as a project to get some practice. Wasn't sure where to post this because it's CSS and HTML.

    I've attached an image so you can see what the problem is. I can't seem to get the images to fit the container. I've tried a bunch of things and I can't get it right. 

    Thanks for your help. :good:

    Here is my CSS code:

    /*Band member images*/
     
    .row {
            display: flex;
            max-width: 300px;
    }
     
    .column {
            flex: 25%;
            padding: 1px;
    }
     
    .figure {
            border: 1px solid black;
            max-width: 300px;
            max-height: 300px;
    }
     
    .img {
            max-width: 300px;
            max-height: 300px;
            object-fit: cover;
    }

    HTML code:

        <figure class="row">
            <figure class="figure">
            <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/brandon_flowers.jpg"
            alt="Brandon Flowers"><figcaption>Brandon Flowers</figcaption>
            </figure>
     
            <figure class="figure">
            <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/mark_stoermer.jpg"
            alt="Mark Stoermer"><figcaption>Mark Stoermer</figcaption>
            </figure>
     
            <figure class="figure">
            <img class="img" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/dave_keuning.jpg"
            alt="Dave Keuning"/><figcaption>Dave Keuning</figcaption>
            </figure>
     
            <figure class="figure">
            <img class="img" id="ronnievannucci" src="WebDesign_HTML_practice_TheKillersTributePage_pictures/ronnie_vannucci.jpg"
            alt="Ronnie Vannucci"><figcatpion>Ronnie Vannucci</figcatpion>
            </figure>
        </figure>

    GettingAnImageToFitItsContainer_compressed.png

×
×
  • Create New...