While Display Image Crop Top And Bottom Of Image Using Css

May 30, 2024 Post a Comment

I am trying to display images from a youtube for videos the display content size height:180px width :270px From youtube images are coming with some black spece on the top and bott

Solution 1:

Update

I have updated the answer yet I'm not certain what you want, you just said what you didn't want. So I'm assuming you want to:

Maintain aspect ratio
Avoid cropping
No black bars, just the image edge to edge

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:

Divide the width by 16

270/16 = 16.875

Take that quotient and multiply it by 9

16.875 * 9 = 151.875

Round up or down

Round up to152px

Change the height with the result then apply object-fit:cover

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

Please review the Fiddle and updated Snippet

Edit

To reflect the update and better understanding of OP's objective, this Snippet is edited.

object-fit is a simple CSS property. See this article The Snippet below is annotated. Btw, the only code that you need from this Snippet is object-fit: cover, the rest of the styles and markup is just for presentation.

Snippet

/* 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's 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;
}
.pointerb {
  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;
}

<sectionclass="box"><figure><figcaption>object-fit: cover</figcaption><imgclass="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><imgclass="bg2"src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /></figure><figure><figcaption>Without anything but the height property</figcaption><imgclass="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's 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><divclass="spacer">&nbsp;</div><p><code>object-fit: contain</code> will stretch an image to the edges of it's 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><divclass="spacer">&nbsp;</div><p>This is the image when set to it's 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>

Solution 2:

You could just clip the image. For more information about clipping you can go here: http://www.w3schools.com/cssref/pr_pos_clip.asp

Example:

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

Solution 3:

I don't know if this is what you are looking for but it looks a little bit like what you want to do no?

the 1st img is height 220px and width 270 and then i put the img behind the div with z-index 1 and i gave the div an overflow hidden and the heigth 180px after i just did have to give the img an margon top -20px to put it in the middle

that is what just came in my head hope it is helpfull

.box{
  height:180px;
  overflow:hidden;
  z-index:2;
  
}
.test{
  z-index:1;
  margin-top: -20px;
}

<div><imgsrc="https://unsplash.it/270/220?image=871"alt=""class=""></div><hr/><divclass="box"><imgsrc="https://unsplash.it/270/220?image=871"alt=""class="test"></div>

.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><imgsrc="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg"alt=""class="te"></div><divclass="box"><imgsrc="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg"alt=""class="test"></div><divclass="box1"><imgsrc="https://i.ytimg.com/vi/WTq-PDsS318/hqdefault.jpg"alt=""class="test2"></div>

if your width is always fixed you give the width to the image and then you find the rigth height and then you have your "container where you can put all the images you want if they always have the same fixed width

Html5 World