i replaced iframe elements on a dynamic content page by amp-iframes. Please have a look at following structure. I dont know the size of the iframe, because layout is responsive and content is not static:
<amp-iframe width=300 height=200
layout="responsive"
sandbox="allow-scripts allow-same-origin"
class="unknown-size">
<amp-img class="unknown-size" width="300" height="200" layout="responsive"
src="/images/logo.png" placeholder>
</amp-iframe>
The AMP-Iframe is responsive, its working fine. But i have problems with the iframe child elements (like a embeded video). There is a ugly gray distance to bottom, because the child element (iframe) is not fully stretched.
I am not able to remove the redundant gray space below my embed video. Can anyone help me, please?
I solved it. With the iframe I included the JW Player, which have a aspect ratio from 16:9.
I add those values to height and width attributes in my amp-iframe, now its working perfectly
<amp-iframe width=16 height=9
layout="responsive"
sandbox="allow-scripts allow-same-origin">
<amp-img class="unknown-size" width="300" height="200" layout="responsive" src="/images/logo.png" placeholder>
</amp-iframe>
Related
I'm wondering how to make the img content inside of my iframe fit to the size of my frame. When i display a pdf inside of the iframe it scales perfectly but displaying a png looks bad because the image returned doesn't scale to its container. Any help would be greatly appreciated! :)
You will have to create a simple webpage inside the iframe, so you can add a height and width to the image
You can actually call object and load it inside it.
<a :href="urlToImage" target="_blank"> <object :data="URLToImage" title="SamplePdf" width="200" height="150"> </object></a>
I can't figure out how to resize the content of a pdf inside a responsive iframe?
As you can see from the image below the iframe has resized however the content hasn't.
View
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src='#Url.Action("ShowPDF", "BillPayment", new { sessionId = #Model.SessionId })#zoom=150' width="100%" height="525" id="iFramePdf" #zoom="200" frameborder="0"></iframe>
</div>
Please advice?
Maybe that could help you :
How to make a PDF responsive
Just an idea but you could get two versions for the pdf, or two level zoom depending on you iframe width ?
:)
Recently I changed the default LARGE size from 960px width to 1280px width.
When I upload the image, WP creates the 1280px image, BUT when I insert it into the post, it still uses the 960px settings, even with the 1280 image.
It's like:
<img src="image-1280x853.jpg" alt="" width="960" height="640" class="aligncenter size-large" />
How can I fix this?
Specifically on this page on an iPhone you can't scroll while on top of the picture. I have been trying to figure it out for hours and I'm praying someone here may have some experience.
http://epiqvapor.com/product/cosmic-fog-milk-honey/
Hi there instead of using an img tag. Use a div and add a background image to it rather.
Instead of
<img width="100" height="100" src="example.jpg"/>
use
<div style="background-image: url('example.jp'); width:100px; height:100px;"></div>
This should solve your problem for mobile :)
I am making a Wordpress website and some the buttons have a background image, and the image changes on hover. This is done through just simple CSS. When the user first goes to the page and hovers over a button, the space goes blank until the new image loads.
What is the best way to load all the images so it has a smooth transition.
P.S There is only max 2 buttons per page
Make a div with an id of preload that contains all the images you want to have show up when the user hovers over the buttons and put it anywhere in your html (it doesn't matter where)
ex:
<div id="preload">
<img src="path/image-01.png" width="1" height="1" alt="Image 01" />
<img src="path/image-02.png" width="1" height="1" alt="Image 02" />
<img src="path/image-03.png" width="1" height="1" alt="Image 03" />
</div>
Then in your CSS, add:
#preload {display: none}
this will hide your images, but they will be loaded. Just make sure that your buttons use the same path as the ones that the preload div do, or else you will be loading images twice.
Full tutorial here:
http://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/
You can use "Sprite" images for your buttons.
Thus all button, normal bg and hover bg will remain in an image.
And that image will load initially with the button normal state.
For hover, you have to use same sprite image, but different background-position in css.