On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.
Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:
img.resize{
width:256px;
height: 256px;
}
You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?
In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).
Now, the black is shorter than the yellow.
use max-width and set the .item class's height... and overflow: hidden:
Fiddle
4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.
If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.
You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.
Related
I am trying to implement a variation to how images are displayed for those viewing this website who prefer a tiled viewed over my image existing slider.
The gallery is labeled as follows:
<!-- TILE GALLERY -->
<div id=tileGallery >
<?php for ( $x=0; $x<40; $x++)
{?>
<div class="col-lg-3 col-md-4 col-xs-6">
<img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg">
</div><?php
}?>
</div>
<!-- end tile gallery -->
And here is the CSS (not showing bootstrap classes which have not been altered)
#tileGallery
{
width:90%;
height:80%;
margin-left:auto;
margin-right:auto;
}
.imgGal
{
max-width: 100%;
max-height: 100%;
height: auto;
}
The images are displayed in a grid as I expect them to be, however some are 'bumped' or 'shifted' over, and an empty space is held where I would expect and image to be. (example follows in 3 example images of webpage):
Example images/screenshots of issue: http://johnkellyphotos.com/exampleForSO/
As you can see from the three images above, the mid size web browser displays correctly, whereas the large and small shift the images as if their was an empty one in their spot. To be clear, it is not failing to display the image in the blank space, simply no element exist there.
Here is what I have tried:
Ensuring all images are the exact same size before uploading to server
Setting overflow to hidden incase some image was somehow larger and 'bumping' the next image
modifying the padding and margins to most logical values, ranging from 0px/0%, to other smaller values
displaying images as background images rather than image tags, which appears to fix this particular problem, however leads to a whole new world of other problems that creates a LOT more work in redoing most of the javascript, and ultimately not likely to be worth it if this has a simpler solution
Adding another div tag between each image to create padding between images
Adding another div with no overflow surrounding each image that is hard coded to a particular width, and hidden overflow. (This also works but creates a nightmare in making the page dynamic because I have to specify the width exactly.
I would ideally like this to work even if the images are not the exact same size when uploaded, such that they display neatly, centered, and do not 'bump' each other out of position. I was having trouble describing my issue to a search engine and accordingly found it difficult to find anything particularly helpful or specific to my problem.
If any part of this question is unclear, let me know so I can fix it.
Thanks!
When using percentages in CSS like you are, many times the widths and heights are outputted in decimals, which are rounded differently by individual browsers. I've encountered problems like this many times where that rounding is inconstant and results in some containers being 1px larger than the neighbor containers which will result in the 'shifted' images.
Lets take grid:
A B C D E F G H I
As long as all the elements share the exact same height they will be a perfect grid. however, if A get rounded to 1px taller than the other elements your grid will turn into:
A B C D E F G H I
This is because A is 1px taller than B and C, which makes it encroach 1px into the next "row" that the floats are creating. And now D and E are acting like A is to the left of them and they are starting 1 position further to the right.
This can happen in many different ways that result's in different images getting "pushed" in different areas of the grid.
My suggestion to fix this is to use Javascript to set the heights of the containers. So that they are all the exact same height. Don't rely on CSS percentages giving constant sizes.
I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.
The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.
I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.
How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?
Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/
#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5
If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.
Solution: all you need to do is add
transform-origin:0 0;
(with the proper prefixes) to the style for #toBeScaled.
See updated fiddle.
I had an idea for a background but I don't know if it can be done, and if it can, what the best method would be. Just to let you into my idea, it's a grid of squares as the background for a page but when you mouse over one it changes color and slowly shifts back(I know how to do the animation portion). The grid is supposed to span the entire page, width and height, and overflow would be hidden. I'd also wish that it could re size itself if the page does
So I'm wondering if this can be done. If it can, how would I generate the grid?
I'm at a complete loss. Any ideas?
I would use <canvas>. Or maybe fill entire body with equally sized DIV's with height and width defined in percentages. Lets say that would be grid of 10x10 DIV's. Or you can create on -the-fly with jQuery as many DIV as you want (to fill whole height). You can float those DIV's to fill entire viewport, and if window is resized use media queries to arrange them. On hover, you can apply some animation on every DIV. Of course, you can put other elements over those DIV's.
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).