Geek Answers Handbook

While image crop image from top and bottom using css

I am trying to display images from YouTube for video images, the size of the displayed content

height:180px
width :270px

From youtube images come with black speech above and below

Example:

enter image description here

I like to display images like this

enter image description here

searched online

the links found are useful, but there is no solution how I want to display the image

How to automatically crop and center the image

This is most useful, but I cannot use the background-image tag. I want it in tag

CSS Display image resized and cropped

Someone help me solve this. Thank.

+4
source share
3 answers

Update

, , , , . , :

  • ,

, 16: 9, , 270 , :

16

270/16 = 16.875

9

16.875 * 9 = 151.875


Round up to 152px

, object-fit:cover

152px is the height of an image that 270px wide and has an aspect ratio of 16:9.

Fiddle

OP, .

object-fit - CSS. . . Btw, , , - object-fit: cover, .

/* We know this is a widescreen poster with the aspect ratio of 16:9, so if you want a width of 270px, do the following:

    270/16 = 16.875
    16.875 * 9 = 151.875
    Round up to 152px
    
152px is the height of an image that 270px wide and has an aspect ratio of 16:9 */
.bg1 {
  width: 270px;
  height: 152px;
  object-fit: cover;
  outline: 2px dashed blue;
}
.bg2 {
  width: 270px;
  height: 152px;
  object-fit: contain;
  outline: 2px dashed blue;
}
.bg3 {
  width: 270px;
  height: 152px;
  outline: 2px dashed blue;
}
aside {
  height: 100%;
  width: 40%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
figure {
  height: 180px;
  width: 270px;
  max-width: 50%;
}
.pointer {
  position: absolute;
}
.pointer b {
  font-size: 32px;
}
#a.pointer {
  top: 43%;
  left: 52%;
}
#b.pointer {
  bottom: 5%;
  left: 52%;
}
.box {
  width: 600px;
  height: 450px;
  position: relative;
}
.spacer {
  position: relative;
  padding: .1% 0;
  width: 2px;
}
code {
  font-family: Consolas;
  color: red;
}
<section class="box">
  <figure>
    <figcaption>object-fit: cover</figcaption>
    <img class="bg1" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
  </figure>
  <!--<div class="pointer" id="a"><b>⬅</b>
    <br/>Space</div>-->
  <figure>
    <figcaption>object-fit: contain</figcaption>
    <img class="bg2" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
  </figure>


  <figure>
    <figcaption>Without anything but the height property</figcaption>
    <img class="bg3" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" />
  </figure>

  <aside>
    <p><code>object-fit: cover</code> will stretch an image to the edges of it container (parent element) while keeping aspect ratio and cropping.</p>
    <p>But when given the correct dimensions, <code>object-fit: cover</code> will result in a perfect fit edge to edge. No cropping either.</p>
    <div class="spacer">&nbsp;</div>
    <p><code>object-fit: contain</code> will stretch an image to the edges of it container while keeping aspect ratio but will not crop at the edges, so as you can see, this image has space left and right. At wider dimentions, the space will manifest below and above.</p>
  
    <div class="spacer">&nbsp;</div>
    <p>This is the image when set to it aspect ratio at 270 x 152px and as you can see, without <code>object-fit:cover</code>, math alone will not resolve the problem.</p>
  </aside>
  <!--<div class="pointer" id="b"><b>⬅</b>
    <br/>Space</div>-->
</section>
Hide result
+2

, , , , ?

1- img - 220px 270, img div z-index 1, div , heigth 180px , img -20px,

, ,

.box{
  height:180px;
  overflow:hidden;
  z-index:2;
  
}
.test{
  z-index:1;
  margin-top: -20px;
}
<div>
<img src="https://unsplash.it/270/220?image=871" alt="" class="">
</div>

<hr/>

<div class="box">
<img src="https://unsplash.it/270/220?image=871" alt="" class="test">
</div>
Hide result

.box{
  height:148px;
  overflow:hidden;
  z-index:2;
  
}
.test{
  z-index:1;
  margin-top: -57px;
  width :350px
}
.box1{
  height:125px;
  overflow:hidden;
  z-index:2;
  
}
.test2{
  z-index:1;
  margin-top: -50px;
  width :300px
}
<div>
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="te">
</div>

<div class="box">
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test">
</div>
<div class="box1">
<img src="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg" alt="" class="test2">
</div>
Hide result

, , rigth, "", , .

0

. : http://www.w3schools.com/cssref/pr_pos_clip.asp

:

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}
0

More articles:


All Articles