I have a rectangular image and I would like to crop it into square. It's something like this:
img {
width: 200px;
height: 200px;
}
It works great, but only when I know final width and height. But what I should do when I don't know height value, only width and not in px but in %?
img {
width: 25%;
}
I have only width (25%) and I need square image. What should I do?
I need solution in CSS. I can't use JS.
If it doesn't need to be an img then I would create a div, make the image the background-image, force a pseudo element to make the height relative to the width of the div and then make the background image cover the div with background-size:
http://jsfiddle.net/8tqxvvzs/
div
{
position: relative;
display: block;
background-image: url('http://placehold.it/350x150');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 25%;
}
div:before
{
content: "";
display: block;
padding-top: 100%;
}
Related
I'm trying to fetch an image from an url like below:
http://jsfiddle.net/b6Q5n/2/
.img {
background: url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png") no-repeat;
height: 60px;
width: 60px;
display: inline-block;
}
div {
vertical-align: middle;
}
<div class="sm">
<div class="img"></div>
Facebook
</div>
I see that the image is clipped according to the given pixels whereas I want to fit that entire image within the above height and width (60*60px)
Any help is appreciated.
You need to change the background-size to 100% 100%, to make it fill the div both horizontally and vertically :
.img {
background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png") no-repeat;
height: 3em;
width: 3em;
display: inline-block;
background-size:100% 100%;
}
div {
vertical-align: middle;
}
<div class="sm">
<div class="img"></div>
facebook
</div>
You need to adjust the background size, not the size.
.img {
background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png") no-repeat;
background-size: 60px 60px;
background-repeat: no-repeat;
display: inline-block;
}
Add Background size and position:
.img {
background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png") no-repeat;
height: 3em;
width: 3em;
display: inline-block;
background-size: contain;
background-position: 50% 50%;
}
Contain makes the image fit the element width and height but keep its aspect. position centers the bg on the element
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
I am trying to fit image into div. But somehow image is not fitting. Take a look at div called as node2
I have put below properties to image
img {
max-width: 100%;
max-height: 100%;
}
Here is my Fiddle
Instead of using max height and width, try using regular:
img {
width: 100%;
height: 100%;
}
I also noticed in your fiddle, under CSS you had the following:
object-fit: contain;
You need to remove this as well.
Both of which will stretch the image both vertically and horizontally across the whole of the div.
I think you need this:
img {
float: left;
object-fit: fill;
width: 100%;
}
and if you do not want to strecth your image then please add following css also:
#node2 {
height: auto;
width: 255px;
}
Please find fiddle demo here.
if you want it 100% x 100% then, do it as background image of your div:
div{
background-image: url('../images/yourimage.jpg');
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
}
I try to set background image of span tag that background image fill background of span .
Size of span is variable.
Background of span Should not be repeated
<span class="link-shape" ></span>
css:
.img-rectangular .link-shape {
background-image: url(images/icon-link.png);
position: absolute;
top: 35%;
left: 35%;
height: 20%;
width: 20%;
z-index:-1;
}
.img-rectangular:hover .link-shape {
z-index:100000;
}
.
You can use the background-size property to achieve this
background-size: cover;
This will zoom/crop the given image to the size of the span. Or you can use the other variant:
background-size: 100% 100%;
A good example and tutorial on this can be found at CSS-Tricks
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.