I need to set background image for a list of <img src="image.jpg"/>. I could only get background images displayed using this css:
img{
background:url(../images/background.jpg) no-repeat;
width:300px;
height:240px;
display:block;
}
However, some of my <img src="image.jpg"/> do not have the same image proportion as 300:240, they got distorted. Is there another way to show background and not getting image distorted?
Do not set fixed width and height, try to set like this
width:auto;
height:auto;
You should try preserving the aspect ratio in the CSS
img{
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
For more information, visit this link: http://css-tricks.com/perfect-full-page-background-image/
If this still gives you problems then consider sticking to images of similar resolutions (Those that work).
Related
On my site when the user uploads their profile picture, it gets funny when the image dimentions are small. Below is an example
I dont know what to do is there a way to make my image come up properly when the image file is not with large dimensions.
make sure that the container of the images has the width and height not the image and on the image use the following
object-fit:cover;
object-position:center;
width:100%;
height:100%;
Try this......
img{
display: block;
width:100%;
height:auto;
}
<div class="hair_care">
<img src="/Content/BusinessProfileImages/bbef41d2.jpg">
</div>
this is my code below of the css. That diesnt work for small images large files with large dimentions come good. and small files images look funny.
.hair_care {
float: left;
width: 318px;
}
Just check if there is width attribute on IMG tag or hard coded pixel/percentage width applied on image tag via CSS rule.
In case of width attribute with IMG tag, please remove that width tag and let CSS control the width and make sure that you set the 'max-width: 100%' and 'width: auto' which is the thumb rule for responsive design.
img {
max-width: 100%;
}
Second, if image is appearing as background image then check the "background-size" properties.
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>
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
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;
}