CODEWITHSUNDEEP
htmlcssresponsive-design
ermac
ermac

Reputation: 438

Responsive image does not fit the container

I'm trying to make a responsive CSS footer-bar that when you hover it, some content comes to the viewport from the bottom. The content inside is some text (That defines the container's height) and a image.

All is responsive and working well except the image that does not fit the container.

I know that it needs a height value from a parent element to work, but how to do that if it is responsive?

This is what I've got so far:

#footer {
  z-index: 9999;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#footer:hover{
  display: block;
  transform: translateY(0);
}

#conainer{
height: 100%;
}
<div id="footer">
  
  <div style="background: #333; height: 50px; color:#fff; font-size: 14px; text-align: center;">
Hover me! (and if you can, resize the frame)
</div>

  <div id="container">
<div style="height: 100%; min-height: 100px; width: 50%; float: left; background-image: url('http://storage.pagani.com/view/1024/2009-12-31-Pagani-03-191m8LL2FRRc-7.jpg'); background-size: cover; background-position: center bottom;"> </div>
<div style="width: calc(50% - 60px); float: left; background: #444; padding: 30px; color:#fff; font-size: 14px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div>
    
</div>

Upvotes: 3

Views: 96

Answers (2)

Stickers
Stickers

Reputation: 78796

First fix the markup error, the 2nd from last <div> should be </div>, And then better to move all the inline style into CSS.

I use CSS table + table cell, so that the two divs always get the same height.

https://jsfiddle.net/huy4zbra/2/

#footer {
  z-index: 9999;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#footer:hover {
  display: block;
  transform: translateY(0);
}

.bar {
  background: #333;
  height: 50px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

#conainer {
  display: table;
  width: 100%;
}

.image {
  width: 50%;
  background-image: url('http://storage.pagani.com/view/1024/2009-12-31-Pagani-03-191m8LL2FRRc-7.jpg');
  background-size: cover;
  background-position: center bottom;
  display: table-cell;
}

.text {
  width: 50%;
  background: #444;
  padding: 30px;
  color: #fff;
  font-size: 14px;
  display: table-cell;
}
<div id="footer">
  <div class="bar">
    Hover me! (and if you can, resize the frame)
  </div>
  <div id="container">
    <div class="image"> </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Upvotes: 1

RMH
RMH

Reputation: 831

You can use a psuedo to keep the container responsive since you are setting a background image:

#footer {
  z-index: 9999;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  transform: translateY(calc(100% - 50px));
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
#footer:hover{
  display: block;
  transform: translateY(0);
}

#conainer{
height: 100%;
}

.awesome:before {
   display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
<div id="footer">
  
  <div style="background: #333; height: 50px; color:#fff; font-size: 14px; text-align: center;">
Hover me! (and if you can, resize the frame)
</div>

  <div id="container">
<div class="awesome" style="height: 100%; min-height: 100px; width: 50%; float: left; background-image: url('http://storage.pagani.com/view/1024/2009-12-31-Pagani-03-191m8LL2FRRc-7.jpg'); background-size: cover; background-position: center bottom;"> </div>
<div style="width: calc(50% - 60px); float: left; background: #444; padding: 30px; color:#fff; font-size: 14px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <div>
    
</div>

Upvotes: 0

Related Questions