Has anyone seen the new google image search. It manages to make the images float in an area. the images fit into this correctly by grouping them in the sizes.
Frog images
I guess there are two ways of doing this:
Scripting by some sort of rule involving the widths and heights of these images
A Css rule for creating the images.
In a scripting scenario we could use a max width of 1000px then group up images to fill this 4 times for our 4 lines of images.
The Css rule would have to make the images float but also re order them.
Does anyone have any other ideas on how this would work?
They re-size images with canvas js. Then set li width, height and then add overflow hidden.
You also can get same result if you set width on all your images in css img.myimg {width:70px}. I don't think it will take longer to render the page then using js code.
I think google doing all these staf on server: try to resize window - it will be reloaded in a sercond with resized images. On the other hand I found a canvas element that also could be used to resize loaded images with js
Related
I'm just using a small bootstrap carousel on a site, but it's acting a little oddly. The first image displays at the correct size but each subsequent one appears half-sized, centred at the top of the container for around half a second before resizing properly. Having reached a frustration point I'm hoping someone can point me in the right direction as to why it might be behaving like this.
Easy way you can handle
This just apply one commen class for images
Then apply CSS
Specify height and width
Definitely your problem get solved..
I am trying to create a virtual gallery that dynamically generates an image (or set of images) based on what artwork is being shown and how large it is. I am having trouble keeping the image positions absolute when scaling the image size in my browser. That is, the images will scale unevenly when the browser display height changes. See the CodePen below for what I mean.
Does anyone have suggestions as to how to fix this? I noticed that Fine Art Multiple (click the link, then the View in Room button) seems to auto-generate their image using either a custom function or a 3rd party program. Does anyone know how I could viably do this, if what I want isn't possible in CSS?
Fine Art Multiple`s virtual gallery:
https://fineartmultiple.com/buy-art/alex-katz-reclining-figure/
FAM's example gallery works because it's not as responsive as yours. As you noted, it's a generated image that is positioned in the center.
Instead of using percentages I set some fixed widths for you and also moved the room image into a background property instead of having it as an additional img element.
I also made sure the person's silhouette disappears on small screens by shifting to the left and off-screen just like in the example.
Most of this positioning is reliant on a left margin combined with transform:
margin-left: 50%;
transform: translate(-50%,0);
This technique can be used to perfectly center and offset any element.
http://codepen.io/anon/pen/RKpver?editors=0100
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
I'm trying to understand why on a webpage I'm working on the image stops scaling once it reaches a certain resolution. You'll see what I mean if you manually adjust the browser size here: http://bit.ly/1nnzqeB
Can anyone help deduce what is causing this?
Because the maximum zoom percentage is limited. In case of chrome it is 500%
Sorry to say, but it may be impossible with your current approach.
I highly recommend going for an approach without using the CSS attribute of background if you always want it to be 100% of the view-port width. Use an img tag instead. You are already using Bootstrap (by the looks of your demo). So use an img tag and give it the class of img-responsive.
DEMO WITH BOOTSTRAP
Here is an example with your image and how you could implement it into your project. If you need to place any text over the image (like in your example), just make the div or heading tag have a higher z-index with either a position relative or absolute. I can provide an example if you need it.
DEMO WITH YOUR IMAGE
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.