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;
}
Related
I would like to display full width image in wide format (crop top of image to max-height: 500px;) on desktop display and original aspect ratio for mobile devices.
I am using gantry framework on a Wordpress site. I have used a css work around to force the image to display full width outside the parent boxed container.
Example This crops from the top except there is space pushed to the top when the image height is less than max-height?
.boxed-container{
margin:30px;
padding: 30px;
background:red;
}
.bg-img{
position: relative;
display: block;
overflow: hidden;
padding: 0px;
margin: 0px;
width: 100vw;
height: 100vh;
max-height: 300px;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg) no-repeat bottom;
background-size: 100% auto;
}
h1 {
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
margin-bottom: 0px;
}
<div class="boxed-container">
This is where the boxed content belongs.
<div class="bg-img">
<h1>This is the header</h1>
</div>
</div>
This code crops the image the correct way with object-fit:cover
#image {
width: 100%;;
height: 500px;
object-fit:cover;
}
And with #media you could change the height and with however you like to, to fit the screen resolution.
Sidenote: This doesn't work in IE.
EDIT:
object-fit:
fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
contain
The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
none
The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
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;
}
For my website this is what I am using for the image with regards to responsive design:
.logo {
max-width: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
}
The image scales properly width wise but the image's height is too big. In these kinds of situations what can one do to make the image scale properly? If I remove height auto and assign 70px the image looks good when viewed in full version but as you begin to shrink the size of the browser the image looks like it's going inwards.
HOw can i fix this?
try this:
{
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
for this wrapp a div around img and apply the height you want and overflow hide it
.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}
So given the css you have there, the ratio of width to height of the image is what's giving you problems. If you don't like the height of the image when the browser is wide, then you should probably get a different image/crop it. When you set the height to 70px what you're doing is forcing the image into a box that it doesn't fit in, so the image will look funny as it's being scaled weird.
But alas there is another option. here is a jsfiddle that shows only the amount of the image that fits within my first n pixels (in your case 70) so that way it will kind of slide out of view. Check the css here :
.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}