I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
Related
I'm creating a website with a flexible layout. I have a background video, and I want to set it so that it has either 100% width OR 100% height. I only want the width OR the height to be used in any given situation, and I want the browser to choose whichever of the two dimensions would make the video the largest. I can't use min-height and min-width, because the video is significantly larger than the size of the screen, so I have to set an actual width and actual height, but I want the browser to switch between using width or height depending on the aspect ratio of the screen.
Does anyone know how this could be done? Ideally the solution would only use CSS and HTML, but if this can only be done with JavaScript, I'm open to any suggestions! Thanks in advance!
Adding a meta tag with viewport as it's name and then setting position attribute in css might do it what you needed.
Combining min-width/height with viewport width/height:
CSS:
#backgroundVideo{
min-height : 100vw; /* the height will always be at least as great as the viewport width */
min-width : 100vh; /* the width will always be at least as great as the viewport height */
}
I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
I have a few divs on my code all of them positioned correctly how i want it. The only problem is that they do not re size when i shrink the page. I want to be able to re size them according to the web browsers size. I do not know exactly how to do it and im worried it might mess up their correct top & left position. All of my divs are currently set as absolute positioning.
Set their sizes to percent values rather than pixels (I asume that's what you're using)
Set all divs with percent values.
Or
You can use 'media rules' of css3:
#media screen and (max-width: 300px) {
.div-a {
background-color: lightblue;
}
}
You have basically 3 options
Bootstrap (http://getbootstrap.com/)
Use percent values instead of pixels
Use vh (view height) and vw (view width). Here's an example: http://jsfiddle.net/7m55nur1/
Note that width: 75vw; keeps the div width at 75% of the web browser. Same as margin-left: 12.5vw which keeps the margin on the left at 12.5% of the browser size.
I figured it out, basically what i did what get the width (lets say it's 300 pixels) and figure out the percent of the page width (in my case is 1900 pixels).
The result would be 15.789473684210526%
putting that exact value worked just fine! As accurate as a pixel.
I used this tool:
http://www.onlineconversion.com/percentcalc.htm
Thank you all for your replies!
Would like to find a way to add a div with position fixed and max width, that should be placed either in a div with overlay or outside overlay. But the tricky part is that, when the window is scaled, I would like it to adjust per percentage....
So if I have a div with max width of 800px but when I make the browser window smaller, it should shrink. Is this possible for all browsers?
Or do I have to use a plugin for this, like jqModal? Please help. Thanks!
Just define a max-width, and then use percentages for scaling purposes:
.modal {
width: 50%;
max-width: 800px
}
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D