Question

我喜欢固定父级的高度，然后尝试将图像放在父级中。我正在尝试将一些裁剪应用于图像顶部。我使用了margin-top：-10％来img到顶部要裁剪。桌面和平板电脑，它看起来还不错，但对于移动设备，我看到图像底部和父母底部之间有一个很大的空间。我不确定我是否做得正确。我很难修复差距。你能告诉我如何解决这个差距或更好的方法吗？

enter image description here

HTML：

<div class="carousel-inner">

<div class="item"><img src="1.jpg" alt="">
<div class="carousel-caption">
image caption 1
 </div>
 </div>

<div class="item"><img src="2.jpg" alt="">
<div class="carousel-caption">
image caption 2
 </div>
 </div>

</div>

CSS：

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 400px;
}

.carousel-inner img{
    width: 100%;
    height: 100%;
margin-top:-10%
}

更新

.page-node-76  .main-container.container img {
    width: 100%;
    display:none;
}

.page-node-76 .carousel-inner .item{
    background-size: cover;
    background-position: center center;
    padding: 15% 0;
    text-align: center;
    margin-bottom: 15px;
}

.page-node-76 .carousel-inner .item:nth-child(2){
        background: url(http://i50.tinypic.com/24ne1ck.jpg) no-repeat;
}

.page-node-76 .carousel-inner .item:nth-child(1){
        background: url(/sites/default/files/carousel_images/slide2.jpg) no-repeat;
}

.page-node-76 .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.page-node-76 .carousel-inner .item div {
    font-size: 25px;
    color: #fff;
    font-weight: 900;
}

Answer 1

试试这个

我将img用作background。

.carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.carousel-inner .item {
	background: url(http://i50.tinypic.com/24ne1ck.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 15% 0;
	text-align: center;
	margin-bottom: 15px;
}
.carousel-inner .item div {
	font-size: 25px;
	color: #fff;
	font-weight: 900;
}

<div class="carousel-inner">
    <div class="item">
        <div class="carousel-caption"> image caption 1 </div>
    </div>
    <div class="item">
        <div class="carousel-caption"> image caption 2 </div>
    </div>
</div>

Answer 2

您可以使用.class或:nth-child.

如何将CSS应用于img进行裁剪

2 个答案: