I'm trying to render a div with a set of small icon images laid out horizontally at the bottom of the div.
When the width of the total line of images is less than that of the containing div there isn't a problem. I'm using code like this:
<div class="main-div" style="position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="...">
<img src="...">
...
</div>
</div>
With the CSS for "icon-tray" as follows:
div.icon-tray {
position: absolute;
bottom: 0;
}
The "main-div" container is positioned with a fixed width and height; there's lots of space between the text at the top and the icons at the bottom.
The CSS above puts the "icon-tray" div of images all in a line at the bottom of the main div, which is just what I want.
However I've got a problem when the number of icons won't all fit on just one line. When that happens the rendered main div looks like this:
--------------
|text text text ...
|
|
|
|X X X X X X X
|X X
--------------
The "icon-tray" div lays out the images line by line starting from the TOP; whereas I would like the icons to be seen as 'filling up' the main div from the bottom upwards, like this:
-------------
|text text text ...
|
|
|
|X X
|X X X X X X X
--------------
I don't have a clue as to how I can go about this. How can I get the icons to be laid out from the bottom up?
Thanks for any help!
You can do this all with CSS - though you have to use some of the more non-standard properties. Since you have standardized to Firefox 3 though it shouldn't be a problem.
First you flip each image vertically, and then you flip the entire div vertically.
Also, I removed your bottom: 0px; style for div.icon-tray. There is no need for that with this method.
Here is the code I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
div.icon-tray {
position: absolute;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
img {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
}
</style>
</head>
<body>
<div class="main-div" style= "position: absolute; width: 700px; height: 600px">
Text text text ...
<div class="icon-tray">
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
<img src="testing.jpg" />
</div>
</div>
</body>
</html>
Seems a little obscure what you're trying to do.
Is this something you will want to be dynamic? If so, you should use some php to get number of images going to be displayed, divide by how many per row, then take the remainder and spit it out first.. somelike like that anyway.
If it's not going to be dynamic and just straight up html, would be easier to just abs position each image (considering your container div has a set width and height anyway?)
I think you'll have to resort to Javascript for this. I can't imagine any way to do it with CSS right now.
Here's what you could do with jQuery:
$(document).ready(function() {
var total = $('.icon-tray > img').size(),
maxperrow = 7, //edit this to the max. imgs per row
breakafter = total-parseInt(total/maxperrow)*maxperrow;
$('.icon-tray:nth-child('+breakafter+')').css({'clear':'left'});
});
The above is assuming you have your images set to float left.
edit: if you can do it server-side, even better. You can do the same math with PHP (for example) and don't have to rely on Javascript.
If you can use CSS3 (Chrome, IE9, Firefox4 this spring) then you can use:
http://dev.w3.org/csswg/css3-flexbox/
I'd recommend reading:
http://www.html5rocks.com/tutorials/flexbox/quick/
Browsers which don't support CSS3 will still get the top to bottom experience however. You'll have to ask yourself if the time investment in using jQuery to position each icon based on width is worth the trouble to support older browsers.
Related
In Figma, the element is given at an angle of 4.93 degrees (screenshot). The transform: rotate(-4.93deg) CSS property produces a result that looks different from the layout. How to insert this element into the page?enter image description here
html:
<div class="tape">
<img src="img/Frame.svg" alt="tape_at_an_angle" class="tape__img">
</div>
css:
.tape__img {
transform: rotate(-4.93deg);
}
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.
I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>
class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?
clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/
Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}