CODEWITHSUNDEEP
htmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3614

Responsive image and grid

I have two boxes.One containing an image and the other with text. How can I make the image fit according to the size of the box?Cause at the moment the image is flowing over the box size as you can see in my code:

     <div class="left-column">
        <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
    </div>

    <div class="right-column">
        <h2>Nevex has the experience</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p>
        <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button>
    </div>

Below is the css

    * {
  box-sizing: border-box;
 }  
   img{
    max-width=100%;
    height: auto;
   width: auto;
   }   
 .left-column{
  width:50%;
  height:auto;
  float: left;
  border:1px solid red;
 }
 .right-column{
  width:50%;
 float: left;
 border:1px solid red;
 }

https://jsfiddle.net/Wosley_Alarico/b2htLvcj/4/

At the end I would like to have both boxes next to each other with the same size and the text aligned to the center using media queries.

A help will be appreciated.

Upvotes: 0

Views: 65

Answers (3)

claudios
claudios

Reputation: 6656

Place the image inside a div with a class image. Check this out.

HTML

  <div class="image">
        <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
  </div>

CSS

.image img {
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}

Upvotes: 2

Alexis
Alexis

Reputation: 5831

You can use flexbox for the size of your column. But you need to add a contain div.

Example : 

* {
    box-sizing: border-box;
}

img{
    max-width:100%;
}

.header{
    border:1px solid red;
}

.left-column{
    width:50%;
    border:1px solid red;
}

.right-column{
    width:50%;
    border:1px solid red;
  display:inline-block;

  margin: 0;
vertical-align:middle;
}

.content{
      display:flex;
  }
<div class="content">
<div class="left-column">
            <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
        </div>
        
        <div class="right-column">
            <h2>Nevex has the experience</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p>
            <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button>
        </div>        
</div>

Upvotes: 1

user4994625
user4994625

Reputation:

You have a error in your CSS code: max-width=100%; should be max-width:100%; with two points.

Upvotes: 1

Related Questions