so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>
Related
If I got an image, say 100*100px, what I want is to scale this image right into a region whose scale is 100*800px (just for test). I've tried to use max-height or max-width, but this will just scale the image proportionally, which can be seen here.
What should I do to stretch the image in order to make it fit into the region? Thanks a lot!
Heres what you can do.
JsFiddle
Change your CSS code to:
img {
width:50px;
height:800px;
background-size: 100%;
}
This will allow to image to stretch in order to fill the height/width
Let me know if this worked!
CSS 3 background-size:
contain
cover
100% 100%
will give you some variations on what you are talking about.
See here:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
as you standard image will 100px by 100px;
you can give your img an ID, then use the ID in your CSS to set the height en width.
max-height or max-width will only set the maximum of both. not change it
#img {
width:50px;
height:800px;
}
I have an image with an original size of 900x300. I have an image container that has a size of 320x180. When I show this, the image looks squezeed. I understand it's because the ratio is not the same. So I am planning to show a zoomed version of it, but with just manipulating it's CSS. Is it possible? Also open to any other ideas that can show this image nicely using CSS tricks without having it looked squished in this box.
Here's a fiddle to play with. I am currently setting the width and height to 100% and hide overflow's.
It's because the ratio of your image is 3:1. You need to make your container size 3:1 as well... if you want your width to be 320px, then you have to set your height to 106px (106.6px to be exact), or something else proportionate to your original image. Here's an updated fiddle.
.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}
You'll notice it's now proportionate.
If you want a zoomed version then you can use css background property in css. Here is the code if this is what you wanted:
.box-container {
position: relative;
height: 180px;
width: 320px;
background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;
}
and remove the img from html.
this gives the effect of zooming
Your Question don't supply that what type of zoom you wants, But I can give you an idea, If you want that the image should be zoom at their place, with the full size then use follwoing CSS with the hover property:-
.boutique-grid .box-container:hover {
position: absolute;
width:900px;
height:300px;
}
See the fiddle here:-http://jsfiddle.net/npsingh/3m9aK/6/show/
Also If you like to provide a zoom with the popup then you can achieve this by following link:-
http://cssdemos.tupence.co.uk/image-popup.htm
If you want to crop the image with the center property and then use in that continer then you should be crop the image with the margin property, by that way you can crop your image with the same aspect ratio. See the post below:-
http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/
Let me know if it will works...
.box-container img {width:100%;
height:auto;}
Add above code to your css. So that image will not squezeed.
Just remove the image element from the HTML and use background-image in your CSS instead.
Then you can use the cover argument for the background-size. This will take care of zooming the image to fit the box as well as keeping it proportional:
.boutique-grid .box-container {
position: relative;
width: 320px;
height: 180px;
background-image:url(...);
background-size:cover;
background-position:center;
}
MODIFIED FIDDLE HERE
With this approach you won't need to worry about re-calculating the sizes as the browser will do it for you.
Use the background-position to fine-adjust its position.
More details on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I'm looking to place an image inside the .hero-unit that takes up 100% of the unit. This means that it would scale according to the overal window size.
Right now i have the in there, but it looks like there's 100px padding to the right of the image. If i adjust the image max-width: 100% to something larger, it does not scale accordingly.
<div class="hero-unit">
<img src="images/landscape.png">
</div>
Does anyone have an idea of how to remove the padding on the right, but also preserve the auto-resizing capabilities of bootstrap?
As mentioned use the following selector :
.hero-unit img {
width: 100%; height: auto;
}
Working sample : http://jsfiddle.net/basarat/MgcDU/2145/
width: 100%; height: auto; should work, as long as the container div's resizing according to window width is correct.
You can do the following :
Here's one jsfiddle http://jsfiddle.net/shail/5YD2J/1/
<div class="container">
<div class="hero-unit">
<img src="http://placehold.it/1500x400">
</div>
</div>
.hero-unit {
padding:6px;
}
You need to have your image in good resolution , scaling an image with small width and height will lead to bad stretched dimensions and wont look good .
Is there a way to resize images retaining their proportions with CSS?
The container has a fixed width and height
<div class="container">
<img class="theimage" src="something" />
</div>
and the reason I'm asking is because the layout can change (from list to icons via a class) and the images need to be resized (about 40% less) in proportion.
I know how to do it with JavaScript and also how to resize via CSS, but don't really believe it can be done in proportion with CSS, unless there is some clever way.
.theimage{
width:100%;
height:auto;
}
or
.theimage{
width:auto;
height:100%;
}
Depending on how you wanna give the scale preference... :) :)
Thats all.
To save the Image ratio while scaling you can use object-fit CSS3 propperty.
Useful article: Control image aspect ratios with CSS3
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
My code:
background:url(images/menu_edu.jpg) no-repeat;
But only half of the image is getting displayed.
The element which has the background needs to be the size of the image.
i.e. flower.jpg = 255px x 55px
<div class="flower">
Some text
</div>
.flower {
background: url(flower.jpg) no-repeat;
width: 255px;
height: 55px;
}
The size of the element cannot be set to the dimensions of the image if you're using a background. You could use javascript to calculate the dimensions though.
Or if you need to repeat the image, you can use repeat, repeat-x or repeat-y on the background tag instead.
If you just want to display an image, the IMG-tag is much more useful and effective... (and it could be set to width(/&)height = 100%).
If you want to display your image in full size, no need to use CSS for this
Dont give height and width attribute to the <img> tag like
<img src="this.jpg" /> it will display in full size
But if you want your <div> to show its background in full size, then is no other option than assigning the exact image dimensions
You are not showing enough code, but if the background image is in the body element, it is probably not stretching across the whole viewport.
Try
html, body { min-height: 100% }