CSS:
.crop-container {
width: 200px;
height: 300px;
overflow: hidden;
}
.crop-container img {
margin-top: -100px;
margin-left: -200px;
}
height
和width
以调整裁剪图像的尺寸,并调整图像元素本身的负margin-top
和margin-left
的数量来选择要裁剪的图像部分。
HTML:
<div class="crop-container">
<img src="some-img"/>
</div>
针对固定高度行的2列网格的替代解决方案:
CSS:
body {
margin: 0;
}
div.img {
float: left;
width: 49%;
margin: 0.5%;
height: 100%;
background-size: cover!important;
background-repeat: no-repeat!important;
}
div.row {
height: 300px;
}
HTML:
<div class='row'>
<div class='img' style='background: url("some-image");'> </div>
<div class='img' style='background: url("some-other-image");'> </div>
</div>
<div class='row'>
<div class='img' style='background: url("foo-image");'> </div>
<div class='img' style='background: url("bar-image");'> </div>
</div>
.crop-container
元素提供CSS:display: inline-block;
。 - nettux如果不为容器设置高度,它就不知道应该显示多少内容。
你可以尝试像这样做:
.portrait-crop{
display: inline-block;
height: 215px;
width: 50%;
overflow: hidden;
}
.portrait-crop img{
width: 100%;
}
width: 100%
是将 img
缩放到 .portrait-crop
(其父元素)的宽度。 - nettux您可以使用4个CSS属性从顶部、底部、左侧和右侧裁剪:
object-fit
object-position
width
height
#crop-bottom {
height: 100px;
width: 350px;
object-fit: cover;
object-position: top;
}
#crop-top {
height: 100px;
width: 350px;
object-fit: cover;
object-position: bottom;
}
#crop-left {
height: 150px;
width: 250px;
object-fit: cover;
object-position: right;
}
#crop-right {
height: 150px;
width: 250px;
object-fit: cover;
object-position: left;
}
<img id="no-crop" src="https://satyr.dev/350x150">
no-crop
<br />
<img id="crop-bottom" src="https://satyr.dev/350x150">
crop the bottom of the image
<br />
<img id="crop-top" src="https://satyr.dev/350x150">
crop the top of the image
<br />
<img id="crop-left" src="https://satyr.dev/350x150">
crop the left of the image
<br />
<img id="crop-right" src="https://satyr.dev/350x150">
crop the right of the image
.portrait-crop {
width: 300px;
height: 100px;
background-size: cover;
background-position: center;
}
<div class="portrait-crop" style="background: url(https://www.google.ca/images/srpr/logo11w.png);"></div>
我不确定自己哪里做错了。非常感谢您的帮助。
您的问题在于 CSS 选择器。
img.portrait-crop
{
margin-bottom: -30px;
}
匹配带有肖像裁剪类的图像。
但是这个
.portrait-crop img
{
margin-bottom: -30px;
}
匹配位于人像裁剪容器内的图像。
在CSS中裁剪图像
.crop{
clip-path: inset(40px 0 0 0); //for left side
clip-path: inset(0 40px 0 0); // for top side
clip-path: inset(0 0 40px 0); // for right side
clip-path: inset(0 0 0 40px); // for bottom side
}
/* Fix for portrait */
.portrait-crop {
width:50%;
overflow:hidden;
height:179px;
display:inline-block;
}
.portrait-crop img {
width:100%;
height:auto;
}
或者,添加一些 div(更好的解决方案):http://jsfiddle.net/yoyb9jn7/
试试这个。将img标签放在一个带有固定宽度和高度的溢出div中,并根据其方向应用宽度或高度。 试一下这个
.overflow{
overflow: hidden;
width: 400px;
height: 271px;
}
.overflow img{
overflow: hidden;
width: 400px;
}
.protrait-crop img
代替。 - rnrneverdies