Question

我有一个宽度为~ 200px且高度为145px的div，在该div中我放置了一个高度为145px但宽度为{{1我怎样才能从图像的右侧剪切210px，以便图像适合div的内容？

Answer 1

对div使用overflow:hidden。div的图像部分部分将不可见

<div style="width:200px;height:145px;overflow:hidden;border: 1px solid green;">
  <img src="http://via.placeholder.com/210x145" style="width:210px; height:145px;border: 1px solid red;">
</div>

Answer 2

对于适合图像：

img {
   width:100%;
   //dont need height
}

用于剪切图像

div {
  overflow:hidden;
}

Answer 3

＆＃13;

.container {
    width: 200px;
    height: 145px;
    overflow: hidden;
}

＆＃13;

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzU5ODI0NDE4MF5BMl5BanBnXkFtZTYwMTE2MTI2._V1_SY154_SX210_AL_.jpg">
</div>

＆＃13;

Answer 4

 .cut-text {
        text-overflow: ellipsis;
        overflow: hidden;
        width:25px;
        height: 1.2em;
        white-space: nowrap;
    }

<h2>text-overflow: ellipsis:</h2>
<div class="cut-text">Hello world!</div>

Css剪切图像的右侧

4 个答案: