Is it possible to make a DIV (set to width="40%") grow in width as the viewport (browser window) gets less wide?
I know that you can also use the 40vw, instead of 40%, to make the div scale down when viewport sizes down but I want the div to go wider when the viewport gets narrower.
thanks, Eddy
Yes you can!
There are these tools called media queries which help to re-work elements once a certain resolution or view-port has been reached.
Here is your typical meta-viewport tag. This sets the browser layout viewport relative to the css styling.
<meta name="viewport" content="width=device-width">
Once you got that in..
#div {
// basic styles
}
#media all and (max-width: 600px) {
#div {
width: 40%;
// extra styles for mobile
}
}
#media all and (min-width: 600px) {
#div {
width: 60%;
// extra styles for desktop
}
}
Related
MAJOR EDIT: Okay I just realize there are a hundred different cases where you'd want to do what I want but using different rules, so I will have to describe my specific case. Basically I am using this image popup (code here)
If you squeeze down the size of the window when a popup is on, you will notice the popup does not shrink to fit the window, which gives a poor user experience notably on landscape mode on your smartphone
I want my popup to shrink according to the two dimensions of the screen, without changing the aspect ratio of the image. (keeping it squared)
So far I have made these changes:
.focus {
z-index: 10;
max-width: 500px;
max-height: 500px;
display: none;
}
.focus.enabled .container {
max-width: 500px;
max-height: 500px;
}
If you try there using firebug, it makes the image responsive when shrinking width, but not when shrinking height of the window... how do I make both dimensions responsive, while keeping a good aspect ratio for the image?
----------- Previous question (for historic purpose only): ----------------
I want to keep an element (in that case, a picture) with a max-size of 500x500 strictly within my browser window, all that while keeping its aspect ratio. Here's some html:
<html>
<head>
</head>
<body>
<img src="myimage.png" class="image" />
</body>
</html>
And some css:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
width: 100%;
}
Now with this css, the image stays within the window, but gets distorted when one of the dimensions of the window gets smaller than 500px. To fix the ratio, I can get rid of one of the two 100% rules:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
/*width: 100%;*/
}
But then, the ratio is kept indeed, but the image gets cropped when window width gets smaller than 500px! What is a pure and simple css solution to this seemingly basic issue?
This is a good use case for vmin units :
1/100th of the minimum value between the height and the width of the
viewport. (source : MDN)
DEMO
Relevant CSS :
img {
width: 70vmin;
height: 70vmin;
max-width: 500px;
max-height: 500px;
}
The drawback for using these units is browsers support, they are not supported by IE8- (see canIuse for more info)
For IE9 support you need to specify vm instead of vmin example :
width:70vm;
width: 70vmin;
height:70vm;
height: 70vmin;
If you can't use these units, there is no way I am aware of to maintain the aspect ratio of a div with CSS according to height. You can maintaint the aspect ratio of a div according to width using the padding technique described in many post on SO like this one.
For the image, you can use the CSS rules I described in my previous answer but you won't be able to limit the size of the image to an arbitrary amount of pixels.
------PREVIOUS ANSWER------------------
If the natural size of the image is 500x500px, you don't need to specify the 500px max-width/height.
You can use that property for the 100% max-width/height and give width/height the auto attribute to keep the aspect ratio of image and never exceed 100% or 500px width/height :
DEMO
HTML :
<img src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" alt="" />
CSS :
img {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
I'm building a site that's 1450px width.
There's a logo that's flushed right of the 1450px max-width at the top of the site, followed by a 1450px-width image underneath.
I want to keep it this way, but when resizing the screen for tablet or mobile, the logo remains flushed all the way to the right.
I want to add about 20px padding to the right of the logo, so it's not flushed to the edge on mobile and tablet screens, but make it aligned with the 1450px image (and flushed to edge of image) for desktop screens.
How do I do this?
You could try this code below:
<style>
#media only screen and (max-width: 800px) { ... }
</style>
This will apply the css in the { ... } to devices that have a screen width of a maximum of 800x.
You could set .logo padding-right:20px; and it will only apply to smaller screens.
You need to use media query view port in css
in CSS you need these tags
#media screen and (max-width: 480px) {
Inside here you add what you want changed for this screen
}
EG:
a {
padding: 20px; // Original
}
#media screen and (max-width: 480px) {
a {
padding: 10px; // only applies to screens up to 480 px view port
}
Best of luck do some more research there is lot on this Google for " Responsive Design "
Addition:
You can have as many view-ports or SCREENS in one CSS as you want, so you can change properties on any size you need. :)
thanks for your help.
Here's the code I used and it works now. (I needed margin, not padding, btw, because the padding was actually squishing the width of the image).
img.logo
{
width: 200px;
float: right;
padding-top: 20px;
padding-bottom: 20px;
}
#media all and (max-width: 1450px) {
img.logo
{
margin-right:20px;
}
}
I was actually wondering if it was possible to mask an image to a circular shape with the use of a single pseudo element, which is the image itself? Let's say it's a rectangle image (not square) and you want to have it masked to a circular shape, without the image being squeezed?
So you'd have:
HTML
<img src="#" class="mask">
CSS
.mask {
A lot of CSS possibilities, up to you
}
I know, with a parent div and using overflow:hidden & border-radius:50% it's possible, but can you do it without the use of a second pseudo element?
Update!
I've noticed that many users seem to think I'm only looking for the CSS code border-radius:50% to create circular shapes, but that's not it. The image should become a circular, not elliptical shape. You can simply use a width and height equal to each other, but then the image becomes squeezed. The answer should contain a none-squeezed image result
The requirement of the solution
- The image should be be a perfect circle, not elliptical
- The image should not be squeezed, no matter the original aspect ratio. Even if you'd use a panorama picture, you'd only see the middle part as an circular shape and the rest hidden.
If you can only use the img tag to produce a mask over itself, then the only work around i can think of is : DEMO
.mask {
width: 0px;
height: 0px;
border-radius: 100%;
background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}
If you can use a wrapper, it can keep the original space used by image and mask can be settled anywhere on top of it via coordonates. DEMO
Markup:
<div class="mask r150 top100 left150">
<img src="http://placehold.it/300x400" />
</div>
CSS:
.mask {
position:relative;
overflow:hidden;
display:inline-block;/* preserve display behavior of initila image to mask*/
box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
display:block;/* a way to remove bottom gap*/
}
.mask:before {
content:'';
position:absolute;
border-radius:100%;
box-shadow:0 0 0 2000px white;
}
.r150:before {
height:150px;
width:150px;
}
.top100:before {
top:100px;
}
.left150:before {
left:150px;
}
The use of extra classes can help you to tune different size and mask position.
Here Fiddle: http://jsfiddle.net/8CuXQ/
Something like this:
.mask {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances.
I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.
So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?
(http://imageshack.us/a/img819/9515/3zt.gif)
(http://imageshack.us/a/img14/853/qp8.gif)
Research:
I notice my question was -1'd. I guess not providing my research was the fault? Here's some of the methods I tried to fix this issue:
Vertical alignment of elements in a div
How to vertically align an image inside div
How to vertically middle-align floating elements of unknown heights?
Wrap long HTML tables to next line
Edit #2
Another version, I think this is the cleanest I can think of
live view
edit view
Use a css table and vertical-align:middle for the wide screen view, then collapse the table for narrow viewports. The code is clean and it's completely independant of image heights.
================
Edit
As #user2748350 correctly pointed out, my original suggestion below didn't align images vertically on a wide screen if they were different heights.
Here's a variation which is an improvement using vertical-align: middle and inline images. The only requirement is that you set a line height larger than the tallest image:
live view
edit view
===============================================
Original
See if this helps you:
live view
edit view
HTML
<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>
CSS
.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}
#media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}
In the head of your page, you also want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for good display on mobile devices.
Hope this helps!
Here is quick solution
img {
max-height: 100%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
First off, I'm new to this and have been doing a lot of research, but can't find the answer.
I have set a div container at the top of my page to 100% width and 20% height.
I wanted to insert an image which would resize automatically across screen sizes.
I found some code on this site which works perfectly in safari and chrome (also resizes perfectly on an ipad and iphone) but in firefox(20) and IE(10) the image does resize slightly but wont stay in the parent container.
Can anyone help?
The original code I have been using is:
<html>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</html>
Any help would be appreciated (and please remember I'm learning!)
#myDiv img
{
width:100%;
height:100%;
margin:auto;
display:block;
}
You need to set the actual width/height of the image to 100%, not the max-width and max-height.