HTML/CSS/ Re-sizing image to fit box

user_18502479 0
Viewed 52

Could someone please educate me on re-sizing images with html/css?

I think this could look better, the aspect ratio looks very squished together. The image is a screenshot of one of my projects. Is there any way this could look more high detail while keeping the height/width of image still fit in the grey box?

Image of problem

Thanks for your help

.ProjectContainer {
    
    margin-top: 200px;
    height: 700px;  
    font-family: "Montserrat", sans-serif;  
    
}

.Projects {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;

}
    
    
    


.Project1 {
    
    margin-top: auto;
    background-color: #dbdbdb;
    width: 350px;
    height: 400px;
    margin: 40px;
    object-fit:cover;     
}
 <div class="ProjectContainer">
    <div class ="Projects">
      <div class="Project1">
           <div class="project1img">
              <img src="project1.png" alt="a screenshot of project 1 home page" height="200"  width="350">    
                </div>
                <div class="title1">My Book Collection</div>

            </div>

css html
1 Answers

It's a horizontal image and a vertical container, not the best of combinations. If you want the image to fit and cover the whole height of the container, you can do this:

.Project1 {
  height: 100%;
  width: auto;
  object-fit: cover;
}

This will crop your image on the sides, but that's all that can be done. I'd suggest taking a better screenshot with the aspect ratio that you need.

user_147937960
Related