图像不断滑出框架

Question

我在一个 div 容器中有一个图像，它在另一个容器中，如下所示：

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

我希望 imageContainer 保留在容器内，但让容器内的图像保持相同大小。

我添加了 css 所以现在当屏幕宽度减小时，图像会滑出框架。

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

在我添加这个 css 之前，图像会缩小以适应 imageContainer 的大小，而 imageContainer 则适合外部容器。

是否可以让图像留在容器内而不缩小尺寸或宽度，而只是在一侧被切掉？

例如，如果我减小屏幕宽度，图像的左侧将保持不变，而右侧则被连续裁剪。

我找不到任何可以帮助解决我的特定 css 问题的方法，所以如果有人知道解决方案，我们将不胜感激。

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

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

Answer 1

检查您是否将 overflow: hidden 添加到正确的位置

.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>

Answer 2

为您的 css 添加高度：

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

检查link：jsfiddle.net/majidliaquat/zfqjxd35/8

图像不断滑出框架

image keeps sliding out of frame

html

css