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;
}
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 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 practicing using various image replacement methods and recently came across a couple articles discussing a new, supposedly more efficient method by Scott Kellum.
Original website article regarding this new method
It seems good and I would like to practice using it, but am not to sure what the html and css for it should be. So in the example below, I have an h1, with the example logo text inside. Then I added a class of .hide-text to my h1 and styled it with CSS. I used a photoshop logo image I made and set that as the background image....the image has a width of 203px and a height of 57px.
Question 1:
When I tested my code in the browser, everything seems to be working fine, however is my usage of Mr.Kellum's image replacement technique correct?
Question 2:
Should I target the h1 in the css and declare the width and height or is it okay to include the width and height directly in the hide-text class like in my example below?
<style>
.hide-text {
background: url(images/mylogo.jpg) 0 0 no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 203;
height: 57px;
}
<body>
<h1 class="hide-text">MyLogo text</h1>
</body>
Any help is greatly appreciated. Thank you community!
I have found the css image replacement museum while searching for the actual trends on image replacement. I met the Scott Kellum method's there. After that I found this question - so I'm not an expert using this technique - and i want to share my opinion about.
Implementation copy-pasted from the link above
Simple, as also posted on the question.
<h3 class="skm">CSS-Tricks</h3>
CSS
h3.skm {
width: 300px;
height: 75px;
background: url(test.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Implementation as I would do it
I've read the original article and i think it's better to split the css code for reusability. Maybe we'll replace with images more than a single element.
<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
<!-- some links replaced with images that also use css sprites -->
<a class="ir" href="#">home</a>
<a class="ir" href="#">sweet</a>
<a class="ir" href="#">home</a>
</nav>
Reusing the ir class for the image replacement technique, as suggested on the post you linked on the question, keeps things tidy.
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h1 {
background-image: url('/the-title-replacement.png'');
width: /*the-image-width*/px;
height: /*the-image-height*/px;
}
nav a {
background-image: url('/the-menu-icons-sprite.png');
width: 24px;
height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }
Conclusions
The image url & the size must be set for each replaced element. If we are using sprites the background position also comes in play for each element, though the element size is often shared between all the elements.
All of this use cases can benefit from splitting the css code, keeping the stylesheet tidier.
NOTE: I've made these thoughts for a pure css implementation. Using a css preprocessor - such as less for example - changes the rules.
NOTE 2: Another trending method is the proposed by the H5BP team. I am undecided about which to use.
Does anyone know a way to get Firefox to crop the corners if the border radius of an image is set? It's containing element will work fine but I get ugly corners sticking out.
Any way to fix this without setting the image as a background image or processing it before I put it on my site?
Workaround: Set the image as the background of a container element, then add border radius on that element.
Does it not crop if you apply the border radius directly to the img element? There are known issues with -moz-border-radius as far as contained content is concerned.
--edit
OK, it doesn't crop img either. If your image is some sort of png/gif on a solid background you may be able to do something like this:
img {
border: 10px solid white;
-moz-border-radius: 10px;
}
But if you're trying to get rounded corners on a photo then it's not going to work in 3.5.
I think to have the answer but sorry for my english...
I resolved the question putting another div with border and no background color over the image.
#imageContainer {
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:1;
}
#borderContainer {
position:absolute;
border:1px solid #FFFFFF;
-webkit-border-radius:10px
-moz-border-radius:10px;
z-index:10;
}
Workaround: Set the image as the
background of a container element,
then add border radius on that
element.
This won't work unless the image is exactly the same size of the div. Unless you use the new css property in firefox 3.6 which allows for background image sizing, but hardly anyone is on 3.6 already.
So I agree with Alex, that is if you make the image the size of the div/other elm.
I don't think there is a way to use -moz-border-radius to directly round an image in FireFox. But you can simulate the rounded corners the old fashioned way, with extra markup.
So that looks like this:
<div id="container">
<img src="images/fubar.jpg" alt="situation normal" />
<div class="rounded lt"></div>
<div class="rounded rt"></div>
<div class="rounded lb"></div>
<div class="rounded rb"></div>
</div>
Then the CSS:
#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url('images/rounded_LT.png') left top no-repeat;}
.rt {background:url('images/rounded_RT.png') right top no-repeat;}
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;}
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;}
The background images of the corners look sort of like a crescent moon, with transparency. This is a negative space technique, where you are allowing the image to show through where the corners have their transparency.
Div corners with PNG-24 backgrounds will work very nicely. If you can deal with the jagginess, you can use GIF backgrounds for IE6, or just remove background image entirely for square corners. Use conditional comments to serve the CSS to IE6.
.round_image_borders {
position:relative; // fix for IE8(others not tested)
z-index:1; // fix for IE8(others not tested)
width:114px;
height:114px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
behavior:url(border-radius.htc); // fix for IE8(others not tested)
}
I got the "border-radius.htc" script from this link:
http://code.google.com/p/curved-corner/
What it does it adds support for round corners for IE8. I also had to set position:relative and z-index, because otherwise the div(and the background image) would show under the desired div container in which the container(round_image_borders) div was put.
This works for:
FF 3.6.16
IE 8
Chrome 12.0
And yes, the image must have the same size as the div with the class round_image_borders. But this workaround is intended to be used with images that all have the same size.
If you use overflow: hidden it won't display the image corners sticking out.
Who knows, they still might be there, just hidden.
img {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Firefox does seem to clip a background image, so if you set an h1 background image and apply border-radius to that it will clip. (just verified in FF 3.6.12)
Is there a good cross-browser way to set a max-height property of a DIV and when that DIV goes beyond the max-height, it turns into an overflow with scrollbars?
Sadly IE6 doesn't so you have to use an expression for IE6, then set the max-height for all other browsers:
div{
_height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE6 */
max-height: 333px; /* sets max-height value for all standards-compliant browsers */
overflow:scroll;
}
Overflow:auto would most likely work in most cases for have any extra spill over.
I found this solution from a post made in 2005 (Min-Height Fast hack). It's a hack but it's simple and pure CSS:
selector {
max-height:500px;
height:auto !important;
height:500px;
}
The example is for max-height, but it works for min-height, min-width and max-width. :)
*Note: You must use absolute values, percentages don't work.
All you need now is the "overflow:scroll;" to make this work with scroll bars
selector
{
max-height:900px;
_height:expression(this.scrollHeight>899?"900px":"auto");
overflow:auto;
overflow-x:hidden;
}
Could you have a wrapper div with the height set as your height and overflow: scrolling. Then the inner div has no height set and as it grows it will fill then use the scrollbars of the first div?
Major hack (RedWolves-style):
.divMax{width:550px;height:200px;overflow-Y:auto;position:absolute;}
.divInner{border:1px solid navy;background-color:white;}
I was getting no love from the max-height attribute so I had this alreadyand succeeded with these 2 classes. But it's ugly so in searching for better hit this question. divMax having position:absolute lets content underneath show through but controls the ultimate height of divInner to 200px.
I found this from http://www.tutorialspoint.com/css/css_scrollbars.htm and modified a bit. It seems working for both IE9 and FF19
<style type="text/css">
.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
max-height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height: 100px !important;
max-height:110px;
overflow:hidden;
overflow-y:auto;
}
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.<br/>
</div>