while display image crop Top and Bottom of image using css
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 to 152px
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;}.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'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> <div class="spacer"> </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> <div class="spacer"> </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>
CSS Display an Image Resized and Cropped
You could use a combination of both methods eg.
.crop { width: 200px; height: 150px; overflow: hidden; }
.crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; }
<div class="crop"> <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck"> </div>
Crop image from the top
Add position: relative;
to the div container (and a height).
Then add position: absolute; bottom: 0;
to the image itself:
.img-container { overflow: hidden; height: 100px; max-height: 300px; position: relative; }
.img { display: block; width: 100%; height: auto; position: absolute; bottom: 0; }
<div class="img-container"> <img class="img" src="http://placekitten.com/400/500" /></div>
<p>Full image below</p> <img src="http://placekitten.com/400/500" />
How to automatically crop and center an image
One solution is to use a background image centered within an element sized to the cropped dimensions.
Basic example
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
}
<div class="center-cropped"
style="background-image: url('https://via.placeholder.com/200');">
</div>
How to crop a rectangular image into a square with CSS?
Assuming they do not have to be in IMG tags...
HTML:
<div class="thumb1">
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1:hover { YOUR HOVER STYLES HERE }
EDIT: If the div needs to link somewhere just adjust HTML and Styles like so:
HTML:
<div class="thumb1">
<a href="#">Link</a>
</div>
CSS:
.thumb1 {
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}
.thumb1 a {
display: block;
width: 250px;
height: 250px;
}
.thumb1 a:hover { YOUR HOVER STYLES HERE }
Note this could also be modified to be responsive, for example % widths and heights etc.
Css- Background Image get cropped top and bottom
Try background-size:contain;
or
you can partially avoid distortion of the image aspect ratio by constraining either image minimum dimension (e.g.) min-height: 700px;
Crop image in CSS
You need to put some height to the container also, if not, it doesn't know how much it should show of what it is inside.
You can try something like this.
.portrait-crop{
display: inline-block;
height: 215px;
width: 50%;
overflow: hidden;
}
.portrait-crop img{
width: 100%;
}
Related Topics
Using: After to Clear Floating Elements
Inserting HTML Tag in The Middle of Arabic Word Breaks Word Connection (Cursive)
Table with Table-Layout: Fixed; and How to Make One Column Wider
How Is The Meta Viewport Tag Used, and What Does It Do
What Does "Semantically Correct" Mean
Image Center Align Vertically and Horizontally
Fix Columns in Horizontal Scrolling
Prefilling Gmail Compose Screen with HTML Text
How to Play CSS3 Transitions in a Loop
Is It Correct to Use Single Quotes for HTML Attributes
Detecting Real Time Window Size Changes in Angular 4
How to Link to Google Maps with a Particular Longitude and Latitude
How to Hide Autofill Safari Icon in Input Field
How to Remove The Default Link Color of The HTML Hyperlink 'A' Tag