I have the following css:
.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}
That corresponds to this HTML:
<div class="mod left"></div>
It results in this mess:
Is there a way to stretch an image to fit a div? Even at the expense of image quality? Thanks!
You can with the CSS3 property background-size. But it's not widely supported at the moment.
You can use the background-size CSS attribute for this.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
<div>
<img src="yourImage.jpg" alt="" />
</div>
div{width:300px; height:300px; overflow:hidden;} //example
img{width:100%;}
This way, the image will resize horizontally to cover your entire div.
Not setting the height, will make it automaticly resize proportionally.
I suggest you put overflow:hidden; on your div. If the image ratio is not the exactly the same, the exceed will be hidden.
Related
I have an image tag like
<img />
I then dynamically download a link to an image, and I set the image src to that link. I do not know the dimensions of the image in the link. Is there a CSS code I can use to make sure the width of the image is exactly 200px (no crop, just stretch to fit) and the height of the image is the same as on the original image? (so basically just a horizontal scale when original dimensions are not known). Whatever I try, it seems to preserve the aspect ratio.
Thanks
Here's an example: I am dynamically loading this image:
I don't know its dimensions, But in the end, I want it to look like (pretend its width is 200px).
This is what you are looking for.
function formatImage(t)
{
//var t = document.getElementById("idOfImg");
alert(t.naturalWidth + " " + t.naturalHeight);
t.height = t.naturalHeight;
t.width = "200";
}
On every image that you want this behavior add onload=formatImage(this);
JSFiddle
https://jsfiddle.net/94rzcLh6/
Lmk if it works. I have not used proper naming on fiddle kindly ignore that.
how about this:
css:
.content{
display:table;
}
.thumb{
width:200px;
height:100%;
display:table-cell;
vertical-align:top;
}
.thumb .in, .thumb .in img{
width:100%;
height:100%;
}
html:
<div class="content">
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/7b/30/7b306aff620b08d0eefdb6b37f57abc8.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/a6/4f/a64ffdfc06a8bea4ed2e62f2a44b063d.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.gettyimages.es/gi-resources/images/RoyaltyFree/113198687.jpg" />
</div>
</div>
</div>
jsfiddle
In the jsfidle sample I check the height and this preserve it.Taking from 2 browsers.The same is for other images.
You need to wrap your image in a container that can help you preserve the 200px constrain you want to apply on your image. The height will adapt to the width which is neat since you won`t have to worry about it.
The below example shows what you can do with a custom size image, from placeholdit, you can modify it as you like. I also advise you to play around with the .wrapper width in order to identify any changes you wish to apply such as adding width: 200px; width: auto; instead... this .wrapper is a very flexible container and that is what you need, you can change it however you like.
EDIT
Going by the comments below, I decided to modify the wrapper of the image to force the image to lose it's aspect ratio. First, I am using a position: absolute (you can also use position: fixed). I also made the image dimensions completely disproportionate to the .wrapper dimensions, to further elaborate on the necessity of losing aspect ratio.
Note: Since it is only a demonstration, I am not worrying about multiple images and how to position them properly (that is another question entirely).
.wrapper {
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.wrapper img {
width: 100%;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1000" alt="some image">
</div>
Feel free to play around with the .wrapper to
I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).
I do not display it as a thumbnail, but can CSS help compress the image of size 1000x1000 into an image of size 500x500?
My CSS for the image looks like this:
.images {
background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}
How do I overwrite this? I do not want to have to generate another image of size 500x500.
You can use CSS3 background-size:
.images{
background:url("image.png") no-repeat scroll;
background-size:500px 500px;
}
But that will resize the image AFTER it has been dowloaded. And the best way is resizing the image with PHP (or similar) BEFORE the user downoads it.
If you can't resize it server-side and you want it to be cross-browser, you could also use
HTML:
<div class="images">
<img class="bg" src="image.png" alt="My image" />
Content
</div>
CSS:
.images{
position:relative;
}
.images>.bg{
height:500px;
width:500px;
position:absolute;
top:0;
left:0;
z-index:-1;
}
(You can set both height and width but only one of them is necessary).
background-size: 500px 500px;
But it's not supported in ie7 and ie8.
If you would display it in an image tag you can set the width and height to the image tag. You can fake a background by absolute positioning the image.
<img width="500" src="..." />
If you are already using the image somewhere else it could be a good idea to reuse and resize it.