Feel like I have explored every option on this and without resulting in a lot of javascript work I wanted to see if there was another way around this.
I have a main container that is 100vh and fixed. The aim for this client is to not allow any scrolling. Inside this container I have a number of image layouts, the images need to remain the same ratio and sizing no matter what width / height the browser.
Here is 2 example layouts, the black boxes being images:
I thought it was simple at first, just give the images a width percentage and they will be responsive however they also need to respond to the height.
An example site is here: http://geordiewood.com/projects/meetka/2
If you resize the browser you can see the images remaining in ratio to the broswer spacing around them etc. Inspecting the elements I can see they have dynamicly adjusting heights and width but im looking for a purely css way if possible?
Example html markup:
<div class="layout">
<div class="image-wrapper">
<img src="img1.png/><img src="img1.png/>
</div>
</div>
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Read these docs I think they may help
Related
I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here:
The cache problem.
My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.
If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event
To make space for images before they load you need to give each image a corresponding value(*) of its height and width.
( * - in good coding practices, this is actually a requirement ! )
For example ::
<img src=[url] width=180px height=300px>
If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs.
Even if they are flexy, you are highly encouraged to at least use relative size (%).
<img src=[url] width=60% height=100%> /*relative::Let's say this set of images is in a
div who's css height is 300px. The images width given as 60% matches exactly its pixel
width, which is 180px.*/
You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.
There are many articles out there discussing a clever way in CSS to make videos (such as youtube) delivered through an iframe responsive (such as described here https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/). Ultimately you wrap your iframe in a relative container with a top padding equal to the aspect ratio (height/width * 100)% of the video.
This works great when your aspect ratio of the iframe contents is static, but is there a clever way to achieve this purely through CSS if your iframe content is also responsive?
For example lets say your iframe contents contain a bootstrap grid of boxes (col-xs-12 col-md-3) and you assign 100% width to the iframe so it responds to vertical window resizing of the parent. As you decrease the size of the parent, at the point the col-xs-12 kicks in, the aspect ratio has changed and you are probably going to see a vertical scrollbar appear for the iframe due to the height change.
I think the only way to achieve responsiveness in this case is through javascript (postMessage calls).
Anyone have any thoughts?
I'm creating a quote-generator page which is also responsive. Here's the link to quote-generator. That's a canvas that dynamically resizes as the page gets smaller or bigger while keeping the image ratio fixed.
What I'd like to do is for the text to follow the image in staying in the center. I'm not trying to get a piece of code that does it, but even if you have the logic behind it, then I can figure how to do it, because at the moment I'm really not sure where to start from.
Thank you.
In this case, put both of that <canvas> and the <div> preceding it into one higher<div> and then you just have to set the relative width and height of the highest div to percentages. Something like this:
<div id="higherDiv" style="width: 80%, height: 80%">
<canvas>...</canvas>
<div>...</div>
</div>
In this way you get a scalable top container relative to user's screen dimensions. If the percentages don't work, you can try this new relative dimensions introduced in >HTML5, here: https://snook.ca/archives/html_and_css/vm-vh-units
I have a fixed height and width container (2480px x 3508) which I would like to dynamically fill with content. Content being between 6-12 images. My question is how I could dynamically size the images relative to their total number and to the size of the container. The images are all approximately the same size, only varying slightly based on their orientation. So basically when there are more images, they are smaller, and when there are less they are bigger and they fill the container as best as possible.
I have not been able to find any Isotope demos which match this? I know there is also packery, and masonry.
Any ideas, tips or examples would be great.
Thanks!
Imagefill.js does exactly that. It is aimed more at individual images but it can also be made to work on a series of images and in combination with Packery.
http://johnpolacek.github.io/imagefill.js/
I have written a file using html and javascript.
In that Vertical scrolling should be there, but i want to stop horizontal scrolling.
How can I do that?
Sarfraz has already mentioned overflow-x, which is one answer although it means (as it says!) that anything that would have been off to the right is now unavailable to the user. There are use cases for that, but in the main it's undesireable to bother to have content the user can't access.
The question is: Why are you getting horizontal scrolling at all? In the normal course of things, the browser will wrap content such that there isn't any horizontal scrolling required. Provided the user has a normal-ish window size, you cause horizontal scrolling in your design by having elements that you've specified as being a certain width, either via style information or by having non-wrappable content (like a big image). For instance, this won't require horizontal scrolling:
<p>...lots of text here...</p>
...but this will:
<p style='width: 1200px'>...lots of text here...</p>
...if the user's browser window is less than 1200 pixels wide.
So if having the content off to the right unavailable isn't what you intend, my answer would be to find the elements causing the scrolling and correct them.
Apply following style to that element:
overflow-x:hidden;
or it should be:
overflow:auto;
overflow-x:hidden;
this will make sure that vertical scrolling is there when needed.
if you want to use this in every browser, you shouldn't add no width to the element, and then it gets no horizontal overflow, in every browser.
If I understand your question correctly, you want to prevent your content from going beyond the boundaries of the browser window. Very often, designers set their layout widths to 960px in order to set a fixed width centered on the page, which fits nicely within a 1024px x 768px computer screen. As per below comments, a smaller resolution computer would gain scrollbars because of this. You would do that with something like:
<html>
<head>
</head>
<body>
<div style="width:960px; margin:0 auto;">
... The rest of your content goes here ...
</div>
</body>
</html>
You can read more about browser width here:
http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width
If you find that the content stretches beyond this width, then a specific item inside the page is too wide. Look at the page yourself to identify what it might be, or provide a link to stack overflow for our help. To give you an example, having this inbetween the above div would be problematic:
<table style="width:99999px;"> ... table stuff ... </table>
if you want your html.body or div liquid;
div.sample{ width:100%;}
sample div will resize whether your screen big or small/
without scroller/
If you view the file using a browser, you can set the width of the content by setting it to a percentage.