I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
Related
user have ability to set height of some div in "px". And if he do that, than some div have height like this:
height: 245px;
but if this is done, then height stays the same which is not good for responsive design. Because i want that that div needs to adjusts to the conditions of responsive design.
So my question is what could I do in css to make div responsive ?
that later the height of div adjusts to the conditions of responsive design.
therefore, the height of div does not need to be fixed.
I have also tried this:
height: 100vw;
max-height: 245px;
but this also not works, as div stays at height of 245px.
Thank you
Convert the PXto %, so it will be responsive.
use the formula:
size-in-pixel/Screen-Size*100 = it gives the percentage
in your code in place of the size in pixel enter the value in percentage
So I've been trying to create a simple page where the image takes up 100% of the height, with a small sidebar. I want the image to resize itself when I resize the window. When I resize the window vertically, the width stays the same, which is not what I want (I want it to retain it's aspect ratio whatever the window size). I really dislike this distortion, but am unsure of how to fix it. Any idea what I'm doing wrong?
.big-image {
max-height: 100%;
min-width: 20%;
margin: auto;
overflow: hidden;
}
set display: block or display: inline-block to your .big-image class, in order for the max-height and min-width property to work. These properties, along with height, width, min-height, max-width, padding-top, padding-bottom, margin-top and margin-bottom doesn't work on inline elements.
You can set either the height or width of an image to auto and control the other property with a set size whether that be percentage or px. That auto should maintain the aspect ratio of the image while you get to control the size of the image with the other property.
max-width:100% and height:auto will work. When applying max-width:1000%; it will take the width of the container and height will be proportionately varied.
Keeping the w/h:auto resizable ability of an img when its parent is set to display:table and the parent's w/h is not 100%? It seems obvious that if the parent's w/h is not set then its child's w/h:auto makes not much sense. My point is, I want to keep the "resizable ability" of an img if it is inside figure/img/figcaption. Description of the problem:
Big images in a gallery we may want to resize to fit the window size if bigger. If it is just an image it can be done easily setting the image's w/h to auto (and maxw/maxh to 100%), with adding margin:auto we get it even nicely centered. But how to achieve the same with figure/img/figcaption altogether? As we want the figcaption's width to match the width of the image dynamically on the fly (not in px) we need to set figcaption display:table-caption (plus caption-side:bottom) and figure display:table. But once we set the figure display:table and its w/h is not set (or is set to auto, otherwise figcaption width will not match the img's), image w/h:auto don't work any more (not much surprisingly) and we get a not desirable 100% of w/h of the img (will not fit into the window if bigger). Is there any CSS only solution how to keep w/h:auto of the img or somehow achieve the same resizable ability if it is inside figure/img/figcaption?
There are many great approaches out there of how to center or resize elements or images, for example here <codepen.io/shshaw/full/gEiDt> or here <codepen.io/dimsemenov/pen/jhsJL>, but these and many more elsewhere don't work with a set of figure/img/figcaption (or I was unable to make it work). I am troubling myslef with it literally for days long with no clear answer.
In other words, what I need: A figure/img/figcaption set is centered altogether, they will resize if the image is bigger than window size, figcaption must match the width of the image width. All should be done with CSS and without setting anything in px.
So <img> and <figcaption> all go inside a <figure> element. All three are block elements.
You would just set the height and width of your <figure> element, then add a margin auto like you said.
Then set in your css:
img {
width: 100%;
height: auto;
}
figcaption {
text-align: center;
width:100%;
}
And now your image and your caption will always be the width of the figure element, the text will always be centered under the image, and the larger element will always be centered on the page.
EDIT: Adding 100% as a width or height to something means "100% of the parent element". So if you set a width/height for your figure element, the elements inside can be 100% and they won't break the element. Again, all three are block elements already, so you don't need to re-declare them as display: table-caption or whatever. Just use the strength of the block element as it is.
EDIT 2: OKAY. Here's what you need:
Set the figure to a specific height and width in CSS.
Then set the img and figure inside your fig caption to: width: 100%; height: auto;.
Your html looks like this:
<body>
<figure>
<img src="">
<figcaption>Some Text</figcaption>
</figure>
</body>
Now you need a media query in your CSS to handle the size of <figure>
#media screen and (max-width: 600px) {
figure {
width: /*Whatever width you want*/
height: /*Whatever height oyu want*/
}
}
Then repeat your media query for different break points.
If you still think I'm wrong, make a codepen or fiddle with an example and I'll help you from there.
EDIT 3
Here is a JSFiddle demonstrating that you can make a responsive image and element using relative measurements in % and maintaining the image centered to the things around it.
http://jsfiddle.net/o2rv4t9h/1/
I know it's possible to setup the block width 100% and it will extend the screen horizontally, as in the snippet code below. But, why doesn't it work for the height?
.block1{
width:100%;
float:left;
background-color:yellow;
}
The above block goes into the container, which was used overflow:hidden; but it didn't help. Is there a way to setup the block height to 100%?
From the spec of height:
<percentage> Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'.
If not, the height of an element with height: 100% would depend on its parent's height, and if its parent's height depends on content's height (height: auto), it would be a circular definition.
First of all, it is not 100% of the screen width, it's 100% of the parent element's width (which, in your case, is probably the same width as the screen).
You cannot do height: 100% because the browser doesn't know how high the parent element is. It's impossible to calculate, so it ends up being ignored by the browser.
You need to use javascript to find out how tall the screen is.
I have a video element set to 100% width in a container div. That div has a max-width of 800px and min-width of 400px. When resizing the browser I need the video element to resize while retaining its original aspect ratio. Currently it resizes in width but remains its original height, adding letterbox bars above and below to make up for it.
Is it possible to resize the video element dynamically like this without resorting to Javascript?
According to the box model, in the section on replaced elements, this should work as you expect: Since the video has a height of auto and a set width, and it has an intrinstic ratio (as videos do), then the used value of height should be computed based on those. Make sure you are not specifying the height anywhere — the following CSS worked for me:
video {
width: 100%;
}
div {
max-width: 800px;
min-width: 400px;
}
Try explicitly adding height: auto to the video — maybe with !important to see if it’s getting set somewhere else.