1

Moving from backend to the frontend, I was given a design and don’t know the best way to handle how to implement it. It’s gonna be about 6 or some images or layered. All Images are 1920px wide * X px high.

I did a little fiddle so you can see what I’m working with. A few images are in there too. https://www.bootply.com/EEjlR9IaFN#

So the problem is setting the width and height of the image/div causes it to extend outside of the bootstrap container and it’s not responsive. So that’s where I’m stuck, I can’t think of a way to make these images fit inside of this container and be responsive. I was gonna just use the img tag but would rather do it via css if I can

DavidWHG
  • 23
  • 3

1 Answers1

2

You can do a little trick that I learned to do the same thing, and it's putting an image behind for the responsive and the background for the front.

HTML:

<div class="element">
    <div class="background-image"></div>
    <img src="http://via.placeholder.com/1920x1080" class="image-responsive" alt="">
</div>

CSS:

.element{
  position: relative;
  display: inline-block;
}
.background-image{
  background-image: url('http://sharksharkshark.net/snow.png');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.image-responsive{
  max-width: 100%;
}

NOTE: You can play and change the size of the back image for the responsive. In this way the div will not be empty but it will be responsive.

Example: https://jsfiddle.net/grg9rc7z/1/

Radames E. Hernandez
  • 4,235
  • 27
  • 37