Image and Text One Row Size Issue

Question

Here is my html code:

I have attached all the images first image is the image where i am getting issue and second one is the image which is correct and third is for mobile display.

<div class="eighth-page" id="eighth-page">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-6" style="background-color: #E44E29;display: inline;">
            <div class="eight-page-content">
               <div class="eighth-page-heading">
                  <h3>PX Booth</span></h3>
                  <h5>PX Booth Hire</span></h5>
                  <!-- line height -->
                  <h5>PX Booth Hire</span></h5>
                  <!-- line height -->
               </div>
               <div class="eight-page-text">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                  <p>
                     It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                  </p>
               </div>
               <div class="eighth-page-content-btn">
                  <a href="#"><span class="btn-learn">Learn</span><span class="btn-more">More</span></a> 
               </div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="eighth-page-img">
               <img src="img/5.jpg" class="img-responsive eighth-img">
            </div>
         </div>
      </div>
   </div>
</div>

Here is my CSS:

/---------------------- Eighth Page - colored ----------------------/

.eight-page-content {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 10px;
    margin-left: 30px;
    width: 80%;
}
.eighth-page-heading h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eighth-page-heading h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #9dff00;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eight-page-text {
    padding-top: 20px;
    padding-bottom: 20px;
}
.eight-page-text p {
    color: #fff;
    font-weight: 100;
    font-size: 16px;
    text-transform: capitalize;
}
.eighth-page-content-btn {
    text-align: center;
    margin-top: 27px;
    margin-bottom: 27px;
}
.eighth-page-content-btn a {
    text-decoration: none;
}
.btn-learn {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #9dff00;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    word-spacing: 2px;
}
.btn-more {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #f2f0f4;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}
.bg-color
{
  background-color: #E44E29;
  display: inline;
}

/*

Media query for content of colored box

*/

@media only screen and (max-width: 480px)
{
  .eight-page-content {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 10px;
    margin-left: 30px;
    width: 80%;
}
.eighth-page-heading h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eighth-page-heading h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #9dff00;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eight-page-text {
    padding-top: 20px;
    padding-bottom: 20px;
}
.eight-page-text p {
    color: #fff;
    font-weight: 100;
    font-size: 16px;
    text-transform: capitalize;
}
.eighth-page-content-btn {
    text-align: center;
    margin-top: 27px;
    margin-bottom: 27px;
}
.eighth-page-content-btn a {
    text-decoration: none;
}
.btn-learn {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #9dff00;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    word-spacing: 2px;
}
.btn-more {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #f2f0f4;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}
.bg-color
{
  background-color: #E44E29;
  display: inline;
}
}
@media only screen and (max-width: 768px)
{
  .eight-page-content {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 10px;
    margin-left: 30px;
    width: 80%;
}
.eighth-page-heading h3 {
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eighth-page-heading h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #9dff00;
    text-align: left;
    font-weight: 700;
    line-height: 1.5em;
}
.eight-page-text {
    padding-top: 20px;
    padding-bottom: 20px;
}
.eight-page-text p {
    color: #fff;
    font-weight: 100;
    font-size: 16px;
    text-transform: capitalize;
}
.eighth-page-content-btn {
    text-align: center;
    margin-top: 27px;
    margin-bottom: 27px;
}
.eighth-page-content-btn a {
    text-decoration: none;
}
.btn-learn {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #9dff00;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    word-spacing: 2px;
}
.btn-more {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: #f2f0f4;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    font-size: 16px;
}
.bg-color
{
  background-color: #E44E29 !important;
  display: inline;
}
}
/*----------------------------------
Media Query for img of eighth page
----------------------------------*/
@media (max-width:767px) {
    .eighth-page-img img {
        max-width: 100%;
        max-height: 100%;
    }
}

@media (min-width:768px) {
    .eighth-page-img img {
        max-width: 100vh;
        max-height: 100vh;
    }
}

@media (min-width:992px) {
    .eighth-page-img img {
        max-width: 100vh;
        height: 480px;
    }
}

@media (min-width:1200px) {
    .eighth-page-img img {
        max-width: 100vh;
        height: 436px;
    }
}

![This is the issue I am getting when I resize the browser. I have used max-height: 100vh and max-width:100vh. Either the image get stretched or image get magnified and overflow out of the div. ]3

Please help as I am new to the Front End Technology.I am using bootstrap3 and also tried flexbox but the issue is not resolved. Please help me out and I am using image of size 4000X2670 pixels.

Answer 1

You Can Try this:

div.eighth-page-img {
    width:100%;
    height:100%;    
    overflow:hidden;
    position:relative;
}
.eighth-page-img img {
    width:100%; //or height:100% according to your requirement
    position:absolute;
    left:50px; // adjust according to your requirement
}

Answer 2

Your issue is that the text element doesnt have the same proportion as the image. Therefore the image will get stretched if you force it to be the same height as the text element. On the other hand, if you adjust the image's width to the max of the container, you Will experience the White space, as it simply has other proportions.

If you dont want to crop the image at all (or use JavaScript), i think your only choice is to force the text element to have the same proportions as the image (with width approximately being 50% larger than height), and then adjust the font-size/text elements to fit the container.

Note: this should maybe have been a comment, but I dont have the reputation to make comment.

---

EDIT:
I might have been too vague in my suggestion as resizing the actual image won't fix the issue in all cases. As soon as you resize the window the text will be pushed downwards when decreasing the window width, making the proportions wrong again.

Therefore, my suggestions would be one of the following (only using CSS and not JavaScript):

Suggestion 1 - make image container position:absolute and insert image as a background:
Show the image as a css background-image with the css background-size: cover property. This will crop the image when it's larger than the container, but it will fill the entire container.

To achieve this you could add the following (Important: remember to delete the <img> from the HTML text):

.row{
position:relative;
}

.eighth-page-img{
position:absolute;
  top:0;
  left:50%;
  right:0;
  bottom:0;
   background-image: url("img/5.jpg");
 background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
}

Note the following with this method:

• You can position the image relatively easily with the background-position property, enabling you to move the image to show the content of it which you want the user to see (in case that much of the image is hidden due to cropping).
• The better you resize/fit the text elements in the container to the left, to match the proportions of the image, the more of the image you will see (as the proportions will be more alike).
• The advantage of this method is that you can load different images based in media queries to support mobiles, without loading multiple images (making page load faster and more mobile friendly, if you load smallere images to mobile). Although this is also possibly in suggestion 2 if you ude the srcset property; however im not sure of the support for this.
• The downside of this method might be the fact that the image isn't an actual DOM-element. This can possibly influence your SEO in the sense, that your image simply won't be taken into consideration the same way as using the <img> property with an alt description.

Suggestion 2 - Insert the image with the <img> property, position:absolute it's container and use z-index to prevent the image/div from overlapping the text-element to the left.

This will include your <img> in the SEO - the only "problem" about this might be that it takes a bit more "managing" to fit in every case. You'll most likely have to check and adjust the left property on different window sizes to make sure that it looks as you want it to.

.row{
position:relative;
}

.eighth-page-img{
 overflow:hidden;
  position:absolute;
  top:0;
  left:50%;
  right:0;
  bottom:0;
}

.eighth-page-img img{
  height:100%;
  /* Change the left property to match your needs. */
  left:-30%; 
  position:absolute;
}

Suggestion 3 - show containers as a table (use css display:table and display:table-cell) which will make the containers the same size.
You can see this technique here.
However using this technique you still have to adjust the image- or text size, such as inserting the image as a background (as in suggestion 1).