There is a div in my masonary images and on 1920 resolution the div increases its height on some images and on few it acts same
for height I have used height:intial;
Any solution?
Related
On my website, some pictures are pretty long (width varies between 400 and 1000px while height >= 3500px). I want to set same width (800px) for all pictures in Lightbox and then scroll down to view them, but don't know how. Where and what exactly should I change in the lightbox.css or lightbox.js?
Problem solved
My Lightbox version is v2.9.0 by Lokesh Dhakar. I solved the problem by commenting out the image fitting part in the lightbox.js. Specifically, in lightbox.js, comment out lines 276-281 and 290-321. This operation will prevent an image from resizing to fit the window and will allow users to scroll down to view a picture if the picture's height exceeds the height of the window.
I have a high resolution image I want to use for a simple yet responsive "coming soon page." The image is 3 times taller than it is wide and itself contains a logo and some centered text strewn across three panes as in this example.
To make this webpage work on both large and small screens it would be great to
Auto resize the image height to 3 times the browser height
Maintain aspect ratio
Set a minimum image pixel width so that "Widest Text Blurb" is never cutoff
Allow the image to overflow as necessary to accomplish 1. without creating a horizontal scroll bar
It would be awesome to scroll snap between panes.
Parts Of The Solution
In the beginning I was using vw or vh on width or height settings but perhaps I should be scaling to something other than the viewport.
Aspect ratio is maintained by specifying the width, or the height, but not both,
Just use CSS min-width
This SO post and answered fiddle help but breaks when I try scaling the image.
I've experimented with cutting the image into 3 different images and placing them in divs in this scroll snap demo but the panes end up overlapping. Scrolling wouldn't necessarily have to show an entire pane but should snap to the horizontal center of a pane
How can I mix the partial solutions above (or others) to make an image scale as described? I have a ton of failed Fiddles I could share but none of them really give a starting advantage.
UPDATE
The text depicted in the imgr link isn't a placeholder for text that will be in divs but is itself in the image. Apologies for any confusion
I'm loving masonry but I have one small glitch: sometimes the width of the masonry container is larger than that of it's parent. Has anyone experienced this before? Under what circumstances does it happen? And how do you solve it?
My site uses isFitWidth and re-does the layout after the browser is resized. The container has auto margins (left and right), so it's centred.
When I slowly reduce the size of my browser I get to the point where horizontal scroll bars show up (and some of the content is out of view), before masonry recalculates and drops a column.
If I check the DOM at this point I find that the width applied to the masonry container element (by masonry) is slightly larger than the size of the parent element. The size of the discrepancies I have seen so far are 8px and 13 px. (It seems to depend in part on the columnWidth and gutter settings).
Note that I am not using percentages for width calculations and there are no images in my content.
I tried several things including:
different browsers
removing unnecessary styling (e.g. padding) from the masonry container
removing unnecessary styling (e.g. drop shadows) from the masonry items
using relative positioning on the container's parent
removing unnecessary styling (e.g. margins) from the container's parent
Any ideas?
I'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.
jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.
Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.
you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!
Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.
Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.
I'm trying to make a slider (using bxSlider) similar to this one.
It seems the div containing the slider changes its width in equal increments depending on the width of the user's browser. In other words, the div never cuts off the image partially, it always shows the full picture or hides it.
Does anyone know how this works?
You can use media queries
For that you have to know how wide your images are, so you can calculate the width of the slider container.
Just a quick example - your images are 200px wide. So for screens between 800 and 1000px your image container has to be 800px - only 4 images can fit without crop. For screens between 1000 and 1200px - 1000px, so 5 images fit, etc.