How to split an image responsive into two div blocks using css?

问题

I have an image which is responsive :

<img class="img-responsive" src="img/image.jpg"/>

I want to split it into two divs :

<div class="slice s1"></div>
<div class="slice s2"></div>

or :

<div class="slice s1">
   <div class="slice s2"></div>
</div>

How can I do that dynamically or using css?

I tried to do it setting the background-image and the background-position of the two div, but the new image is not the same, it's no longer responsive.

回答1:

This is a cool question and doable.

So long as both images are equal in size and you set the outer <div> to the width of the image, and so long as you don't mess with the width in your animations, any changes you make to the inner image will be reflected on the left of the image, and any changes you make to the outer image will be reflected on the right of the image.

#image {
    position: relative;
	width: 200px;
   	}

   	#half-image {
   		position: absolute;
   		top: 0;
   		left: 0;
   		width: 50%;
   		overflow: hidden;
   	}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="image">
	<img src='https://placehold.it/200x200' id='outer' class='img-responsive'>
	<div id = "half-image">
		<img src='https://placehold.it/200/e8117f' id = 'inner'>
	</div>
</div>

回答2:

I've found a solution inspired from @wlh 's answer :

.img-responsive{
  width: 100%;
  max-width: 100%;
  height: auto;
}
.hidden {
  visibility:hidden;
}
.sliced-img {
  position: relative;
  width: 100%;
}
.slice {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
}

.s1 {
  left: 0;
  background-image: url('https://placehold.it/200/0e0e0e'); /* black */
  background-position: 0%;
}

.s2 {
  left: 50%;
  background-image: url('https://placehold.it/200/e8117f'); /* pink */
  background-position: -100%;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="style.css" rel="stylesheet"/>
  </head>
  <body>
  <div class="sliced-img">
    <img src='https://placehold.it/200x200' class='img-responsive hidden'> <!-- This hidden image (image we want to slice) is under the two divs, it's just used to get the image height and/or the image src dynamically -->
    <div class="slice s1"></div>
    <div class="slice s2"> </div>
  </div> 
 </body>
</html>

NOTE

The css background-image property will be set dynamically using the jQuery .css() function for example ( Don't forget to delete the background-image from .s1 and .s2 in the css file ) :

$( document ).ready(function() {
  var imageSrc = $('.sliced-img').children( 'img' ).attr( 'src' );
  $('.sliced-img').css("background-image","url('"+imageSrc+"')");
});

回答3:

To make a background image scale with the size of a div you need to set the background-size property.

.slice {
    background-size: cover;
}

You can use any CSS size units (50px, 3em, 50%, etc.) as well as auto, cover and contain. You'll need to play around with the various settings to see if you can make them match up. cover will make sure the background image fills the entire container and will crop any overflow. contain will make sure the background image always fits inside the container and will letterbox.

Finally, if you need the div to scale with a specific width-to-height ratio, you can use the "percentage padding" trick.

.keep-ratio {
  background: cornflowerblue;
  width: 100%;
}

.keep-ratio::before {
  content: '';
  display: block;
  padding-top: 50%; /* 0.5 ratio, half the width */
}

<div class="keep-ratio"></div>

This works by having the pseudo element ::before inject a block into the div which has a padding-top of 50%. Vertical percentage padding is always a percentage of the width, so because that pseudo element is 100% wide, 50% would set the vertical padding to half the width. So as the width grows and shrinks, so does the vertical padding on that pseudo element.

来源：https://stackoverflow.com/questions/42193749/how-to-split-an-image-responsive-into-two-div-blocks-using-css

标签

html

css

responsive-design

responsive