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 ?
Related
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>
I am trying to fit an iframe properly inside this div. Here's what it looks like right now:
How do I adjust the iframe's height so you can see the whole video. Thank you
After you grab the iframe from YouTube:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/RFaqnamTfm8"
frameborder="0" allowfullscreen>
</iframe>
Just increase the height property until you get the desired effect, which should do the trick.
I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.
But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.
Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.
Thanks & Regards,
Mrudul
I'm going to take a wild guess and say you're using bootstrap to make things responsive.
If thats the case, you can simple add a class to images to make them scale correctly..
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
You can copy and paste this in your editor to test it.
This way, if the screen gets smaller, so will your image.
EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
</div>
</div>
</div>
I got a small page where I must use Foundation 4. The problem is that I use the RoyalSlider plugin for the gallery. If I'm on a big screen it works quite well. It looks like this:
http://jan-schloesser.noip.me/phpfundamentals/gallery/example-slideshow.php
But if you're resizing the browser window to a minimum, the grid set the width of the photos automatically to 100%. How can I disable the small grid in Foundation 4?
Here is the code segment:
<div class="royalSlider rsDefault">
<img src="link_to_image" alt="">
<img src="link_to_image" alt="">
</div>
What is the current standard way to handle responsive images in a mobile first approach?
That is: is there an accepted method in use today that allows small resolution images to be served to mobile/small screen width devices, while larger resolution images be served to tablet/desktop etc.?
Omit width and height on the <img /> tag, if it's parent element is responsive it'll scale.
Exactly, as sanusart wrote you.
For example, if you use Twitter Bootstrap extension (recognized by many as the best or one of the best responsive design-oriented frameworks) and set it to use responsive design (not set, by default), then all you have to do, is to put your image inside responsive container, for example well:
<div class="well">
<img src="img/logo.png" class="img-polaroid" />
</div>
And your image will adapt its dimensions according to screen resolution.
If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:
<div class="well">
<div class="row-fluid">
<div class="span2"></div>
<div class="span8"><img src="img/sunflower.jpg" /></div>
<div class="span2"></div>
</div>
</div>
But we aware, that on a wide screens (like phones in portrait mode) your left and right "separators" will be stacked top and bottom, which may produce unwanted side effects.