I have an issue where i need to use google ads as iframes that sit nicely at max-width in Zurb Foundation. However the ads are set out of my control and I need to find a way of scaling the Ads iframe width and height to 100% of the parent div and maintain aspect ratio of each ad.
Example mark-up of what happens before the google adwords js is triggered would be:
<div class="cell resp" id="GA-ID-#####"><script>Google ads stuff in here</script></div>
I can't use the padding hack, as I wont know the aspect ratio.
Google brings me nothing thats feasible; does anyone have experience of this?
Related
I have a page with a central iFrame flanked by two sidebars left/right, and I am trying to make the iFrame's content responsive. I already have the parent window set up with #media queries in the CSS stylesheet, so that it changes the layout when the viewport width is reduced (I'm working PC screen down, not mobile screen up). This layout change is (among others) a switching of the sidebars from left/right to top/bottom relative to the center iFrame for the mobile view.
The issue is the iFrame's viewport. When I use #media's max-width in the iFrame's CSS sheet, it uses the inner width of the iFrame as viewport width. This is causing me trouble because when switching the sidebars in the parent window to top/bottom positions, the iFrame's size goes from ~540px in the smallest desktop view to ~860px in the largest mobile view, so I can't set a #media max-width query without creating an overlap on either side - displaying either the PC-intended iFrame CSS on the mobile parent CSS, or vice versa.
I would also prefer not to use max-device-width instead, because then the content no longer responds to resizing of the browser window on a PC, since it refers to the screen size rather than the browser window size. (This is important to me because it allows me to quickly test the responsiveness and allows for people using the page on a non-maximised browser page.)
Is there a way to make an iFrame's content responsive to the size of the parent window, rather than itself or the screen?
I have control over all the elements involved, so if this can't be done I can also change the iFrame into a PHP include statement and put the center panel content on the page that way.
This is kind of a specific question.
<div id="d_btn">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
Here's a jsfiddle: https://jsfiddle.net/fcjwjutb/
you'll notice it creates an image button which is really just a div with a background image, and that thanks to a base64 data of a single transparent pixel the aspect ratio is always 1:1 (a different pixel w/h would give different aspect ratio). it changes the image when you hover.
the problem is: if I resize the window vertically, the aspect ratio breaks.
however, automagically, if you refresh the page - the aspect ratio returns to normal.
what I want is the aspect ratio to stay correct while you resize the window, without having to refresh. what would I need to change in this specific example to accomplish this? looking for a CSS answer, not JS.
the "trick" to maintain aspect ratio here is the fact that if you set only height or only width, the other parameter should automatically maintain scale if there's an image involved, that's what the 1pixel is for.
I don't get why this breaks upon resize though, when initially upon page load it works correctly.
The issue seems to revolve around the fact that when you resize, the div's background image stretches instead of... well... not stretching. but the div itself also gets resized, while the img child inside of it doesn't, and maintains its aspect ratio as intended.
after seeing some incorrect answers let me make something clear:
the div and the image size have to match. hover event should only get triggered when you hover over the image itself, otherwise this doesn't feel like a "button". basically you're not allowed to have a div larger than the image, or else you create blank area that triggers a hover event.
the answer I'm looking for is one that is able to make the div itself resize in a way that keeps the aspect ratio while you resize the window, while having the background image always cover the entire div.
You can use background-size property to ensure background images maintain their aspect ratio within a given container.
It is also bad practice to use IDs for elements like this one.
I have solved the problem for you...
https://jsfiddle.net/x18h41yr/
You can also use flex-box to now centre page elements vertically & horizontally. Read more about flexbox here
I use Unveil.js to lazy load images. To save time/space, I use a base64 placeholder image:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://unsplash.it/1000/500?image=631" width="1000" height="500" data-unveil="true" />
The problem I'm experiencing is how the placeholder image gets resized. It seems to always maintain an aspect ratio of 1 which is a problem for responsive sites.
So if the image tag above is inside of a <div> with width 50% and the <div>'s calculated width is 500px (total viewport width is 1000px) then the image will overflow the <div> unless I use max-width: 100%; height: auto; and then a non-data URI image will correctly scale and maintain its aspect ratio.
However, the data URI image always remains square, regardless of width/height attributes in the <img> tag or CSS rules. This causes some jumping around on slower servers because the image that gets lazy loaded by Unveil.js is not always square.
I setup a quick fiddle to demonstrate the sizing differences (without Unveil.js): http://jsfiddle.net/silb3r/7bnfqkko/1/
And one with Unveil.js: http://jsfiddle.net/silb3r/2eff5thm/ (you may need to manually throttle your connection to see the issue)
Is anyone familiar with a way to ensure that the data URI maintains the aspect ratio of the original image? Preferably without adding more jQuery, but I am open to anything.
Thank you for any suggestions.
Well, your CSS overwrites the width and height set via HTML attributes, and so the intrinsic image dimensions come into play, and those are 1×1 pixels. And therefor setting height:auto naturally results in a square image, no matter what.
If you know the aspect ratio for your images beforehand (and you seem to do, assuming those width and height HTML attribute values you used are not completely arbitrary – otherwise, a few lines of server-side code could read them from the image files, if it needs to be more dynamic), then you can use what’s called the “padding-top hack” to create a placeholder that will use the correct aspect ratio.
I have been studying the page code of the Pinterest website lately to learn some design tricks in CSS. One thing I observed is that they set the height of each of their images using a CSS style. This is odd to me because it is clear that they are all being resized in order to have a uniform WIDTH of 192px. Is there a technical reason for setting the height instead of the width?
Example:
<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">
Pinterest uses a JQuery masonry. http://masonry.desandro.com/
Now, if you try using masonry for floating for objects as Pinterest does; there comes a point where your objects won't arrange no matter how much you zoom in or zoom it. If you play around by setting width for the objects; you'll soon realize the maths behind "Pinterest's 192px". After giving reasonable padding and margin, you'll HAVE to assign this particular width for the proper function of the arrangement. I've worked on a developing a website similar to Pinterest and it took us over a week to decrypt the logic behind "Pinterest's 192px width"
The "aspect ratio" of the images isn't always optimal. Sometimes when you resize to X height and Y width, the resulting image is wider or higher than expected depending on the width/height ratio. If you set a fixed height in css you make sure it will never be bigger than that (and your design wont "break")
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.