在div中只显示图像的某些部分 [英] Show only certain portions of image inside a div
本文介绍了在div中只显示图像的某些部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我如何只显示div内的图片？请参阅下面的图片，其中只有蓝色突出部分内的图像的一部分应该是可见的，而以红色框显示的图像不应该显示，在图像之间留出空间。
输出将是下面的图片。
这里是 jsfiddle 。
我也在这里粘贴了代码。
.img-sub {height：150px; overflow：hidden;}。img-sub img {height：100％; position：absolute; margin：0 auto;左：-100％;右：-100％; width：auto;} < div class = -fluid> < div class =row grid-container> < div class =col-md-12> < div class =row> < div class =col-md-5> < div class =row img-container img-featured> < div class =col-md-12> < a href =/ posts / 1> < img class =img-responsive img-thumbnailsrc =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < / div> < / div> < div class =col-md-7> < div class =row> < div class =img-container> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < / div> < / div> < div class =row> < div class =img-container> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < div class =col-md-4 img-sub> < a href =/ posts / 1> < img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg/> < / a> < / div> < / div> < / div> < / div> < / div> < / div> < / div>< / div>
解决方案
overflow：hidden也填充了bootstrap用来添加gutters的填充。
所以我把img-sub移动到了< a> 元素（也固定了一些css）
https://jsfiddle.net/y573zfja/3/
< / div>
< div class =col-md-4>
< a href =/ posts / 1class =img-sub>< img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault。 jpg/>< / a>
< / div>
< div class =col-md-4>
< a href =/ posts / 1class =img-sub>< img class =src =https：//i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault。 jpg/>< / a>
< / div>
< / div>
< div class =row>
< div class =col-md-4>
< a href =/ posts / 1class =img-sub>< img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault。 jpg/>< / a>
< / div>
< div class =col-md-4>
< a href =/ posts / 1class =img-sub>< img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault。 jpg/>< / a>
< / div>
< div class =col-md-4>
< a href =/ posts / 1class =img-sub>< img class =src =https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault。 jpg/>< / a>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
CSS：
code> .img-sub {
height：150px;
overflow：hidden;
width：100％;
display：block;
position：relative;
}
.img-sub img {
height：100％;
position：absolute;
margin：0 auto;
left：-50％;
width：auto;
}
How could I only show the image inside the div? Please refer to image below wherein only part of the image inside the blue highlighted part should be visible while the one boxed in red should not be shown leaving a space between images.
Output would be the image below.
Here's a jsfiddle.
I've pasted the code here as well.
.img-sub {
height: 150px;
overflow: hidden;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -100%;
right: -100%;
width: auto;
}
<div class="container-fluid">
<div class="row grid-container">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<div class="row img-container img-featured">
<div class="col-md-12">
<a href="/posts/1">
<img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="img-container">
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
</div>
</div>
<div class="row">
<div class="img-container">
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1">
<img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
The overflow:hidden also fills the padding that bootstrap uses to add the gutters.
So I moved the img-sub to the <a> element (also fixed up some css)
https://jsfiddle.net/y573zfja/3/
</div>
<div class="col-md-4">
<a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4">
<a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4">
<a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4">
<a href="/posts/1" class="img-sub"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.img-sub {
height: 150px;
overflow: hidden;
width: 100%;
display:block;
position:relative;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -50%;
width: auto;
}
这篇关于在div中只显示图像的某些部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
