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.
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 adjust the images and size depending the page size to doesn't go outside the grid, but I couldn't make it.
I tried add theses lines below in CSS but it bugged the others images
img{
width: 100%;
max-width: 800px;
}
The content should adjust the size of the image, but it isn't working
The image going outside the grid:
You can see the live preview here
Just give max-width for image to 100%
img {
max-width: 100%;
}
do the exact opposite you are doing
img {
width:800px; /* this is optional */
max-width: 100%;
}
OP's comment:
I already dropped it (the width:800px), but it messed with the images at right sidebar.
Then create a class something like img-resposive and for that class apply max-width: 100%. And use that class in images you want/need to
I suggest if you are trying responsive design, use 50em; instead of 800px
They are both equal (except when window is resized.)
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.
Okay so I want to have an image that I select through CSS to be fluid based, however, this is the problem that I run into.
This is what I think in my head I have to do, however, it doesn't work:
#image { background-image:pic.jpg; height:100%; width:100%; }
But, you can't have this tag use the "height:100%;", correct? You have to set it to a pixel width. But if I want it to be fluid.. then I can't set it to a pixel width, correct?
Is there another way to do this? Thanks.
If you do it this way it will be fluid:
HTML:
<img src="http://news.bbcimg.co.uk/media/images/62777000/jpg/_62777247_62777242.jpg" alt="" />
CSS:
img {
width: 100%;
}
http://jsfiddle.net/7hMbQ/1/
Or if you want to stretch width and height to 100% try this (but the ratio will not be correct):
http://jsfiddle.net/7hMbQ/3/
If you mean "fluid" in the sense that I'm thinking of it (responsive design sort of 'fluid'), then setting the "max-width" to "100%" should make sure that the image never overflows past its container (or in other words, goes past 100% width).
img { max-width: 100%; }
EDIT: If your issue is making the height maintain the aspect ratio, just don't specify a height property, or if you need to override an attribute setting, set the height to auto (!important) too:
img { max-width: 100%; height: auto !important; }
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)