image keeps sliding out of frame-CodePudding

I have an image inside a div container that's inside another container like so:

<div className='container'>
  <div className='imageContainer'>
    <img src='whatever' />
  </div>
</div>

I want the imageContainer to stay within the container, but keep the image inside that container to the same size.

I added css so now when the screen's width decreases, the image slides out of frame.

.imageContainer {
   border: 1px solid black;
   width: 100%;
   overflow: hidden;
}

Before I added this css the image would shrink in size to fit inside the imageContainer which is fit inside the outer container.

Is it possible to have the image stay in place inside the container and not shrink in size or width, rather just be cut off on one side?

For example if I would decrease the screen width the image's lefthand side would stay in place while it's righthand side is continuously cropped.

I couldn't find anything to help with my particular css issue, so if anybody knows a solution that would be greatly appreciated.

.imageContainer {
  border: 1px solid black;
  width: 100%;
  overflow: hidden;
}

<div class='container'>
  <div class='imageContainer'>
    <img src='https://via.placeholder.com/2560x1440' />
  </div>
</div>

CodePudding user response：

Check if you added your overflow: hidden in correct place

.imageContainer {
  border: 2px solid purple;
  padding: .3rem;
  width: 100%;
}

.container {
  max-width: 600px;
  border: 2px solid red;
  padding: .3rem;
}

.container--crop {
  overflow: hidden; /* add overflow: hidden to upper parent container  */
}

<p>Not cropped</p>
<div class='container'>
  <div class='imageContainer'>
    <img src='https://dummyimage.com/700x400/000/fff' />
  </div>
</div>

<p>Cropped container</p>
<div class='container container--crop'>
  <div class='imageContainer'>
    <img src='https://dummyimage.com/700x400/000/fff' />
  </div>
</div>

CodePudding user response：

Add height to your css:

.imageContainer 
 {    
       border: 2px solid black;
       width: 100%;
       height:100px;
       overflow: hidden;
  }

Check the link: jsfiddle.net/majidliaquat/zfqjxd35/8