CODEWITHSUNDEEP
htmlcss
Jordanbaggs
Jordanbaggs

Reputation: 59

How to keep an Image responsive and have the same perspective

So I am trying to make a responsive website, so far so good.

But I am having an issue keeping an images width and height the same (the images are squares).

I have a div called "pageContainer" which inside it has many divs called "eachBlog". Inside this there is an image div and a text div. As the site is responsive as the page grows in width so does the image. However this knocks off the ratio of the squared image (making it a rectangle).

I'm sure this is down to my poor code :(

So what I am trying to do is: as the div "eachBlog" grows in width and height, so does the image and keeps looking like a square :)

Here's the html:

   <div class="eachBlog">
        <div class="image">
            <img src="image.jpg">
        </div>
        <div class="text">
            <h1 id="title"> Shifted Thoughts- Mazde </h1>
            <p id="sample"> /* text */ </p>
            <p id="more"> READ MORE </p> 
            <div class="bottom">
            <p id="tag"> HIP HOP </p>
            <p id="date"> 5 feb </p>
            </div>
        </div>
    </div>

The css:

   .pageContainer{
     width: 80%;
     height: 80%;
     display: block;
     margin: 0 auto;
     }
    .eachBlog{
       position: relative;
       background: #ffffff;
       width: 48%;
       height: 20%;
       float: left; 
       margin-top: 2%;
       margin-right: 2%;
       }

      .image{
         width: 37%;
         height: 100%;
         float: left;
      }
       .image img{
          width: 100%;
          height: 100%;
       }

      .text{
         width: 55%;
         height: 100%;
         position: relative;
         float: left;
         padding-left: 4%;
         padding-top: 1%;
       }

Big thanks in advance!!

Upvotes: 0

Views: 798

Answers (1)

pavel
pavel

Reputation: 27092

Set max-width and max-height instead of width/height.

.image img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto; /* nnot sure if width/height are necessary here */
}

Upvotes: 1

Related Questions