I'm trying to create one of those little fade effects that Google uses at the end of text instead of an ellipsis or simply cutting the text off with overflow:hidden.
I do this by creating a :before element, that I position over the right hand side.
Here's the mixin I use:
.OverflowFadeRight(#color)
{
position:relative;
&:before {
content:"";
height:100%;
position:absolute;
top:0;
right:0;
width:4.8rem;
.GradientLTR(transparent; #color);
}
}
This code works, but what I would like to do is set the width to the same as height so it's always proportional, which is 100% the height of the parent.
I've seen techiques which set height based on width, but can it be done this way round?
You need to use object-fit: contain to achieve this result.
Turns out that creating a square with height:100% using pseudo elements may not be possible.
The way to create a 'responsive square' is to use the img tag.
It allows to set the height and it will proportionally auto-adjust its width.
The alternative to that is to use percentage off the width.
Here's a demo using either one.
<!-- Empty image 1x1 pixels as gif base64 data -->
<div class="OverflowFadeRight2">Real square with img
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</div>
Related
I'm using centered imgs to act as backgrounds for some tiles. I'm trying to have these images scale with their parent div's height and if they are wider then their parent's for them to hide the overflow.
Example:
* I've got it working now. Answers are below, I'm updating this code to display all I needed to use to get it to work *
HTML
<div class="container">
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
CSS:
.container {
height:250px;
width:50%;
}
.derp{
object-fit: cover;
height: 100%;
width: 100%;
}
Here's a near-example: http://codepen.io/chriscoyier/pen/myPMGB
The difference would be that I'm using s and not background-image, and that instead of the img filling the div completely it would fit to the height and hide the width overflow.
I'm trying to avoid using background-image since I'm using a lot of these tiles and making CSS rules for every one isn't going to work.
In order to scale it with the div's height, I'd change the height from px to % - this way, the larger's the div, the larger's the picture. In order to certain the image, i'd use margin in the image css. That'd look like so:
.derp{
height:80%;
width:80%;
margin:10%;
}
.container {
height:250px;
width:50%; /* needed */
/* inner img is centered horizontally */
vertical-align:top;
text-align:center;
overflow-x:hidden;
}
<div class="container" style="background-color:gray"> <!-- The background is there so you could see the image relative to the div -->
<img class="derp" src="http://gridiculo.us/images/kitty02.jpg">
</div>
The best way to keep the aspect ratio of the image is to set the width to auto (and it's the default behavior so you don't need to set explicitly). And with a simple overflow:hidden it works almost as you want it.
The hard part is centering horizontally. You can try this answer :css to center a image horizontally.
However if all your images aren't the same size, you will need to make one rule per image. And in this case putting the image as background-img would be better for semantic and accessibility (because your image doesn't have a sense in the page, it doesn't convey any information, it's decoration). An <img> would be read by a screen reader (the alt attribute), and in your case it wouldn't help a blind people.
Depending on how many browsers you need to support, I'd suggest you use object-fit! Support for it is okay if you can ignore IE, but in case your project qualifies, I see no problem with using it today. Also, there is always a polyfill.
You can find a nice summary on CSS-Tricks.com about the property. It basically works similarly to background-size, but for <img> tags. In your case, object-fit: cover; does the trick.
I made a little demo on CodePen that shows you how it works.
img {
height: 100%;
object-fit: fill;
width: 100%;
}
If I have an image on a page with width set to 100% in css it is as wide as the browser. Fine. However, if I make a containing div have display:inline-block, then the image is no longer set to have a width:100%. Instead, it just shows as the actual width of the image:
img {width:100%;}
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div style="display:inline-block;">
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
So, basically, the inline-block containing div wants to be as wide as its contents, and the width:100% on the image wants to be as wide as the containing element, so it seems they are both confused and just defaulting to the width of the image. I know I can set the width of the containing div to be 100% and have the desired outcome, but for what I am actually doing, that is not an option. Is there any way to force the img to be 100% width with only css on the image itself? I guess I am basically trying to set a class on a parent of an element, which I do not think is possible... Ideas?
This is because a percentage value on width is relative to the width of the box's containing block. While a block-level container (<div> element, for instance) takes the entire width of its containing block, an inline-level element doesn't.
Therefore you have to specify the width of the wrapper <div> explicitly. As a thumb rule, when you say 100% you should ask yourself 100% of what?
img { width:100%; }
div { display:inline-block; width: 100%; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
Alternatively, in cases where you want to set the width of elements as the width of the viewport/window, you could use viewport percentage units instead. For instance:
img { width: 100vw; } /* 1vw = 1/100 of the width of the viewport */
Demo:
img { width: 100vw; }
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
<div>
<img src="http://www.gannett-cdn.com/-mm-/0c9109c71ea0524d9fe840f91fabd67bb94a26a9/r=537&c=0-0-534-712/local/-/media/USATODAY/USATODAY/2013/05/30/1369920769000-grumpycat-1305300933_3_4.jpg"/>
</div>
I dont think this will help your problem , but technically you could do it by giving it position:absolute;
img {
width:100%;
}
div img {
position:absolute;
margin:0 auto;
width:100% !important;
}
http://jsfiddle.net/kjf8s3rq/
The problem is that you are trying to use dislay-inline in a way contrary to its intended use. If you want the image to take up the full width of the window, then clearly its container must also take up the full width. Which means you want your div to behave like a block element. So the solution is either to do just that and leave the div as display:block (its default value to start with), or at the very least you must set it's width to width:100%. Afterall, if you want to take up the full width of the screen then you want it to be a block.
Inline-block elements have to have their width set, either by specifying a width in the CSS, or by letting them take up as much width as they need to hold their content. In your case the image has its natural size, and your surrounding inline-block div is therefore taking up just that size and no more.
Setting width:100% on the image doesn't change that; that just tells it to take up the full with of its container, not the whole window. But your containing div is already the natural size of the image.
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 can't figure out how to make it so that when a window can't display the whole image, it cuts the image on the left.
This code always cuts the right side using:
img {
position:fixed;
}
You just need to add right:0; if you want to cut the left side on resize. Check this fiddle: http://jsfiddle.net/H3Vqc/1/ and test.
Further:
If you want to resize the image when you resize the browser then use width: 100%.
If you want to hide the right side set position: absolute; and left:0;
or u can simply apply dir="rtl" on the div the image is on this results on what you want
<div dir="rtl"><img src="yourImg.jpg"/>
</div>
Strictly assuming if you are using css background you can use the background-position property to position your image, and use width and height to get it to the right size
You likely want to set max-width: 100% to the <img>, like this: http://jsfiddle.net/H3Vqc/4/
I am having some problems using percentages to horizontally center an absolutely positioned image. It it for a fluid site and so I need the erasers.png image to be centered in the background. I need to be able to control its size in percentages, so I dont think I can make it a background image.
Is there a way to do this? Or is there a better way to accomplish the same thing?
http://jsfiddle.net/vzPUw/6/
Absolutely position a wrapper for the image (instead of the image), apply text-align:center to the wrapper, and set its left and right properties to 0px. The wrapper will be the same with as the header, but will be taken out of the flow, while the image can continue to behave as an inline element, so that centering works, but will be isolated to the context of the wrapper.
HTML:
<span id="erasersWrapper">
<img id="toperasers" src="http://dl.dropbox.com/u/14080718/Final/images/erasers.png" alt="Erasers">
</span>
CSS:
#erasersWrapper{
position:absolute;
left:0px;
right:0px;
text-align:center;
}