I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.
Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.
<div class="scroll-wrapper">
<iframe height="260" width="280" src="info.pdf"> </iframe>
</div>
.scroll-wrapper {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;
height: 300px;
}
Maybe you should try using viewport.
Or using responsive breakpoints
#media screen and (max-width:512px) {
size:
}
#media screen and (max-width:512px) {
.scroll-wrapper{
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;enter code here
height: 300px;
}
}
try this
iframe {
width: 100% !important;
}
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I'm trying to make a responsive template and I'm using iframes for youtube videos.
When i put a caption underneath the video it works fine on desktop, but when I go to responsive mobile mode there is big between caption and video.
Can any body help me to fix it, so that caption stay underneath the video regardless wether I'm on desktop or mobile.
Here is the link for my template:
http://www.sayarts.com/past-events.html
You are not using the right approach to make your videos responsive. Height for your videos remain fixed that's why their is huge gap between videos and caption on mobile phones.
To make the videos perfectly responsive, add the video inside a div like this:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
and then use the following CSS:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can read more about it in this article
You can simply add this style to the wrapper element: height:auto, it seems to fix the problem.
#wrapper embed, #wrapper iframe {
max-width: 100%;
height: auto;
}
If you need more control use the responsive media queries, this is an example:
#media only screen and (max-width: 468px) {
body {
/*you specific styles*/
}
}
I am trying to use the following css code (which works fine on a desktop browser) to create a container that is a square the width of the mobile screen:
.my_container {
width: 100vw;
height: 100vw;
}
.my_container iframe {
width: 100%;
height: 100%;
}
The iframe looks like this:
<div class='my_container'>
<iframe src='https://vine.co/v/iMJzrThFhDL/embed/postcard' frameborder='0' allowfullscreen>
</iframe>
</div>
When viewing the app (ionic/codova) on my iPhone 5 running ios 9 the container is much much wider than the screen width. It seems that iOS doesn't correctly obey vw.
Is there a way to do this?
There is this twitch embed streaming iframe i have created, it works good side by side with the chat and perfect the way i want to, the codes are below
.t_container{
display: inline-table;
width: 100%;
}
.ts_iframe{
display: table-cell;
width: 100%;
}
.tc_iframe{
width: 250px;
float:right;
}
<div class="t_container">
<div class="ts_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/embed"></iframe>
</div>
<div class="tc_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/chat"></iframe>
</div>
</div>
But now I have no idea how to make it to be responsive, I mean, I can make the iframes responsive but as you can see the iframes are side by side and the embed chat is smaller and it is difficult for me to apply a responsive css since I'm not quite good with it , so is it possible to be this and when visited on smaller screens like an "iPhone" the embed chat to drop under the embed video?
Try appending this to the end of your other CSS:
#media (max-width: 768px) {
.t_container { display: block; }
.t_container .tc_iframe { display: block; width: 100%; float:none; }
}
It's going to turn your table cell approach into blocks for screens that are 768 pixels wide or smaller.
Use media queries to control the output at certain breakpoints. In this case, you can use the same concept Bootstrap would do (and does). Make them 100% width! And make sure you float them, of course.
#media (max-width: 768px) {
.ts_iframe, .tc_iframe {
float: left;
width: 100%;
}
}
Herr is the DEMO
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 4 years ago.
Is there a way to resize (scale down) images proportionally using ONLY CSS?
I'm doing the JavaScript way, but just trying to see if this is possible with CSS.
To resize the image proportionally using CSS:
img.resize {
width:540px; /* you can use % */
height: auto;
}
Control size and maintain proportion :
#your-img {
height: auto;
width: auto;
max-width: 300px;
max-height: 300px;
}
If it's a background image, use background-size:contain.
Example css:
#your-div {
background: url('image.jpg') no-repeat;
background-size:contain;
}
Try
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
You can use object-fit property:
.my-image {
width: 100px;
height: 100px;
object-fit: contain;
}
This will fit image, without changing the proportionally.
Notice that width:50% will resize it to 50% of the available space for the image, while max-width:50% will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-width should always be used.
UPDATE: This was probably an old Firefox bug, that seems to have been fixed by now.
To scale an image by keeping its aspect ratio
Try this,
img {
max-width:100%;
height:auto;
}
Revisited in 2015:
<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">
I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.
older version:
If you are limited by box of 120x100 for example you can do
<img src="http://image.url" height="100" style="max-width: 120px">
<img style="width: 50%;" src="..." />
worked just fine for me ... Or am I missing something?
Edit: But see Shawn's caveat about accidentally upsizing.
The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.
img{
max-width:100%;
object-fit: scale-down;
}
works for me. It scales down larger images to fit in the box, but leaves smaller images their original size.
I believe this is the easiest way to do it, also possible using through the inline style attribute within the <img> tag.
.scaled
{
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}
<img src="flower.png" class="scaled">
or
<img src="flower.png" style="transform: scale(0.7);">
Use this easy scaling technique
img {
max-width: 100%;
height: auto;
}
#media {
img {
width: auto; /* for ie 8 */
}
}
img {
max-width:100%;
}
div {
width:100px;
}
with this snippet you can do it in a more efficient way
We can resize image using CSS in the browser using media queries and the principle of responsive design.
#media screen and (orientation: portrait) {
img.ri {
max-width: 80%;
}
}
#media screen and (orientation: landscape) {
img.ri { max-height: 80%; }
}
You always need something like this
html
{
width: 100%;
height: 100%;
}
at the top of your css file
Try this:
div.container {
max-width: 200px;//real picture size
max-height: 100px;
}
/* resize images */
div.container img {
width: 100%;
height: auto;
}
image_tag("/icons/icon.gif", height: '32', width: '32')
I need to set height: '50px', width: '50px' to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my _nav.html.erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>