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.
Related
I am building a grid of images and I have a list of figure tags with one image inside each one.
Images are different in size so if I set
max-width: 100%;
height: auto;
they don't look the same.
How can I make all images to fit the figure to be all the same size? it is OK for me to stretch the images that does not fit perfectly.
thanks
Use objectfit on img tag with contain or cover properties
figure img {
object-fit: contain;//contain the image you can use cover to fill the div with image
width: 200px;//desire width
height: 200px;//desire height
}
Please follow the styles in css.. but i think this is not a correct rule to stretch the image.. we can use background image in css instead of stretch..
css
figure img {
width: 100%;
height: auto;
}
I'm trying to place my logo into a div / span tag / h1 tag ( anywhere really )
I'm trying to load the image using CSS. I'm nearly sure i've done this many times before.. but for some reason it's not working this time.
CSS
.logo{
background-image:url(../img/logo-6.png);
width:400px;
height:75px;
}
It's simple. nothing special. I know the path to the image is correct. I was coding in Sublime text.. but moved to Dreamweaver when this didn't work. When i hover over the image URL in Dreamweaver it shows my image.. so it's the correct path.
HTML
<span class="logo"></span>
<div class="logo"></div>
Thats just two example of what i'm trying. I've no content in the span or div and I won't use both once I get one working.
the width and height that i've set are the correct size that the image is.
Why won't it appear as a background image in the div / span ?
Try changing your width and height to percentage
width: 100%; height: 100%;
Or try the background-image without the width and height, and see!
As for the html part:
Try adding the <img> inside the <div> or the <span>
then go to your css and try this:
img { width: 100%; height: auto;}
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
Repsonsive web design works great on most html elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images...Or am I missing something?
So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?
Thank you
The done thing in responsive design is to set this in your css for images and some other elements:
img, embed, object, video {
max-width:100%;
height:auto;
}
Then in your html the image simply takes up the size of it's container.
You do not set the image size itself you just let it grow/shrink itself.
well - you can write: .selector img{width: 100%; height: auto;} and then use the size of the div it is in to determine it's scale. or you can also set the image as a background and use similar methods and maybe even mess around with background-size: cover. i'll make a jsfiddle...
.image-w img {
display: block;
width: 100%;
height: auto;
}
What I have done on my site is this:
page stuff....
div class=picr>
img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >
<p>Caption about mountain pine</p>
/div>
Then in CSS
pic, pic6 {
float: left;
}
...
.pic, .picr {
width: 37%;
}
#content img {
width: 100% ;
}
So the div class is styled, and the picture is set to fill it. By using the div, then I can also style within the .pic classes to be distinctive from the body text.
Now I face a problem with defining image attribute height and width as I don't know its dimension from the server. Then I think about assigning width/height to auto.
e.g.
img {
height: auto;
width: auto;
}
but I am concerning about rendering performance images without specific width/height. I would like front end developers here to help with this concern.
Hey now define your img width in 100%
as like this
<div class="imgtagcss">
<img src="xxx.jpg" >
</div>
Css
.imgtagcss{
width:xxx;
}
.imgtagcss img{
width:100%;
}
Give width and height has a 100% in css. So when css is loaded all the image tag will be setted to 100%. This doesn't give any performance effect.