I currently have a PDF embedded in my website:
<body onload="startTime()">
<div id="resume">
<embed src="files/Resume.pdf" height="1250" width="975">
</div>
<h2 id="resumeNote">*Resume current as of 8/21/12</h2>
</body>
But I noticed that the sizing is not relative (it does not resize when the browser is resized). Most of the time it isn't an issue, but it looks a bit tacky when resizing. Is there any way to fix this? From what I've been able to find thus far it looks as if there is no option other than setting the PDF to display at a fixed height/width.
Related
Chrome 81, FF 75 (latest for today)
in Chrome native image lazy loading works inside iframe only. why? in FF works good
page1.htm(lazy loading does not work in Chrome but works good in FF):
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<p style="margin-bottom: 1000px;">Please scroll down. The image is below the viewport.</p>
<img src="https://wallpaperplay.com/walls/full/5/e/a/218959.jpg" loading="lazy">
page2.htm(lazy loading via iframe works both in Chrome and in FF):
<iframe src="page1.htm">
is it Chrome's bug? in FF it works good
(you can check image deferred loading via scrolling and Developers tools -> Network)
I've got the same issue but only when the image is close enough to the viewport. Otherwise it is being loaded lazily.
Please try to open this minimal working example in Chrome and slowly scroll the page down. The image will be loaded when the viewport is approximately in the middle of the page.
<html>
<head>
<style>
.dummy {
height: 700vh;
}
</style>
</head>
<body>
<div class="dummy"></div>
<img src="https://yasminfinch.com/wp-content/uploads/2015/03/Hello-icon-300x212.jpg" loading="lazy">
</body>
</html>
Without confidence, I can suggest it is a feature, not a bug. Some kind of optimization. It reduces the chance to see the image is loading when, for example, user scrolls up/down quickly enough.
In my case, I had to explicitly set width attribute either inline or in CSS file.
In fact, you can try the original demo. Lazy loading on Chrome will not work if you remove the width and height attributes in this demo.
I have an image with height 100% and width auto. It should always be square and never skewed. If you resize your browser to make the website less tall, the image gets skewed. While skewed you can open the inspector and uncheck height 100% then re-check it and the image will snap back to square.
<html>
<body>
<div id=outer style='height:100vh'>
<div style='height:50%'>
<img style='height:100%;' src='https://i.pinimg.com/236x/0f/9a/36/0f9a36457c046fe12c2c69ad60a3e737--creative-thinking-texture.jpg' />
</div>
</div>
</body>
</html>
https://jsfiddle.net/auey41fd/
This is really messing up my site for chrome users. Does anyone know a good work around? It doesn't only happen when the user resizes the browser. Any time the outer container becomes less tall, the images inside get skewed. It's not specific to using vh units. Everything works fine in firefox and IE.
Change height to min-height. That should fix your issue.
Put display: flex; on the image so it stays the same.
This bug was confirmed by Chromium.
https://bugs.chromium.org/p/chromium/issues/detail?id=773445#c16
After over a year of not trying to fix it they recoded something and inadvertently fixed it.
1) I have this image from another website that i want to show in my html page, but it does not work.
2) However if I open a new tab in the browser, take that link and put it in the url, I can see the image.
3) If I do 2 first and then 1, i can see the image in my page, but not if I clear the cache after 1
Any idea how to see the image from my html code ? Thanks
<html>
<head>
</head>
<body>
<img id="imgMap" src="https://uk-air.defra.gov.uk/assets/meto-maps/20170319_day1.png" width="60%" border=1 ></img>
</body>
</html>
The code you made works, but the problem could be that the server where the image is hosted can block the display of it on other domains/server.
So for you the image will be broken. Are you sure the server you're using is connected to the Internet and that is not blacklisted by the original domain of the image?
The width attribute is screwing up the image being displayed because you're using a percentage. According to the <img> documentation on MDN:
width: The intrinsic width of the image in pixels. In HTML 4, either a percentage or pixels were acceptable values. In HTML5, however, only pixels are acceptable.
You can either use the width attribute with pixels (width: 50px), or if you really want to use a perecentage, use CSS styling:
<img id="imgMap" src="https://uk-air.defra.gov.uk/assets/meto-maps/20170319_day1.png" style: width="60%" border=1 >
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
I have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)