在div中有溢出的图像并排显示

Question

所以我想在边框内显示图像，然后在该图像后面有大约2-3张图像，但我只想看到第一张图像的第一部分。 像这样：

然后我需要隐藏边框外的所有数字，但是第一个旁边应该有2-3个这样的图像，但是隐藏了。

有办法吗？

编辑：
HTML：

<div class="roulette">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
    <img src="../application/views/img/cases.png">
</div>

Answer 1

您可以使用 overflow：hidden; 隐藏div中的元素 通过使用 float：left; 图像并排放置。所以，在代码下面，我有很多图像，但只有8个显示其余的图像被隐藏;

＆＃13;

＆＃13;

.roulette{ 
width: 200px; 
height: 25px; 
outline: 2px solid red; 
overflow:hidden; 
float:left; 
} 

.roulette img{ 
width: 25px; /*8 images for .roulette{*/ 
height: 25px; 
float:left;
}

＆＃13;

<div class="roulette">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
    <img src="https://www.bareinternational.com/wp-content/uploads/2016/01/number-1.png">
    <img src="https://www.favorsandflowers.com/images/D/Number-2-Rhinestone-Cake-Topper-D.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我做了一个div

style = height 20 px和width 20 px（您可以输入您的值）

style = border-line：solid和border-width：5px（您可以输入值）

最重要的部分：溢出：隐藏

如果溢出是可见的，那么无论div如何，图片都会按原样显示，如果它被隐藏，那么只会显示div适合div的高度和宽度

*编辑：通过一个接一个地放置它们，它们将是并排的 另外，我可以推荐的是，为此目的使用SPANS

*编辑2：更改了代码段，添加了一个大图片，并集成了2个按钮来移动它的位置

现在你可以（在绘画或其他东西中）制作1个大图像而不是3个小图像，以使这个变换像转移一样：）

希望我能提供帮助。

function getPosition() {
  var img = document.getElementById("img");
  var rect = img.getBoundingClientRect();
  alert("Coordinates: " + rect.left + "px, " + rect.top + "px");
}

function scrollImgLeft() {
    var img = document.getElementById("img");
    var rect = img.getBoundingClientRect();
    document.getElementById("img").style.position= "relative";
    document.getElementById("img").style.left = (rect.left - 20) + "px"; 
}

function scrollImgRight() {
    var img = document.getElementById("img");
    var rect = img.getBoundingClientRect();
    document.getElementById("img").style.position= "relative";
    document.getElementById("img").style.left = (rect.left + 20) + "px"; 
}

<div style="height:40px; width: 120px; border-line: solid; border-width: 5px; overflow:hidden">
  <img id="img" src="https://www.theroomplace.com/images/theroomplace/content/global/header-16.2/digital-catalog.jpg" >
</div>

 <button onclick="scrollImgLeft()">Left</button> 
  <button onclick="scrollImgRight()">Right</button> 
 <button onclick="getPosition()">Get Position</button>