I have the code
<iframe width=150px height=150px src=http://yahoo.com></iframe>
Here I will have a 150x150 iframe, but I want the whole site to be reduced to a 150x150.
Is it possible to do it.
Thanks
Jean
Not really (read: not cross browser). Internet Explorer supports the zoom CSS property which might work, but AFAIK no other browsers support it.
From the details you've given it looks like you're trying to get a thumbnail of a site. Have you considered using a thumbnail preview service like WebSnapr or SnapCasa?
Related
I have a development made.
I'm using 430px X 455px images
When I down-scaled image to 184px width:
- Google Chrome: looks perfect
- Firefox (37.0.1) looks very unfocused
- Internet Explorer (11.0.9): "sawtooth" look (very pixelated)
Why is this? Not rescaled images I can use?
What solution could there be?
Development: http://s566904160.mialojamiento.es/desarrollo/
Use object-fit property of CSS.. Read this tutorial
http://www.devtantra.com/273/object-fit-css3/
If you're not bound by latency concerns, consider serving ~25% more pixels than you're specifying in CSS, and let the browser do the downsizing. That will also handle cases such as browser zoom.
You get the best image quality when using images in the desired resolution.that can be achieved either by creating them in a tool like Gimp or Photoshop, or using libraries like ImageMagic.
I'm using Thickbox to display videos on a website and the youtube video seems to be too large for the thickbox frame. I've tried decreasing the youtube video size but the thick box seems to follow the size of the video because no matter what I adjust the size to I always have this:
http://imgur.com/KJ2kJYr
Notice in the bottom right corner, the video goes outside the frame. Any suggestions are welcome.
Here is the html code for the video. Personal info has been removed (site name, youtube embed, etc.):
<a class="thickbox" href="//www.youtube.com/embed/XXXXXXXXX?rel=0&showinfo=0&controls=0&KeepThis=true&TB_iframe=true&height=400&width=600" title="XXXXXXXXX"><img src="http://www.XXXXXXXXXXX.org/campaign/wp-content/uploads/sites/59/2013/11/XXXXXXXXXX.png"/></a>
I would need the full code to give a complete answer, but based on my experience with other plugins:
Most plugins have very specific styles that are sometimes difficult to override. Give the video a "class" and set the width to width: 100% !important; (or whatever). This should override the defaults set in place by the plugin.
Is there a way to make an image bigger in HTML5 without it getting blurry.
For example, this image is 24x24:
If you instead load it with a width of 150, it gets blurry. I want pixelated!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
Instead I would like to change the rendering engine to display like what you would see in photoshop. Something like this:
I only care about modern browsers.
If you just leave it to the browser, they will try to make it as smooth as possible nowadays (old IE versions didn't). So your best bet is to load it into a canvas and do the (nearest-neighbour) upscaling yourself. I'm not saying that this a sane idea, just putting it out there. :)
That, or have multiple versions of the image and switch them around somehow. There are a few technics you can try, like css sliding-doors.
After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.
Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.
Like this:
Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
In any modern browser, when you visit an image url (eg, http://i.imgur.com/xrM9q.jpg), it automatically resizes that image and gives you the option to "zoom in" with a little magnifying glass. This is not always the case with an iframe:
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
If you link an iframe to an image, Firefox will give this nice behavior: it starts out behaving like max-width: 100%; max-height: 100%, then you can click on it to make it big.
However, in Chrome, the image is just full-size. Try opening this example in Chrome and Firefox.
How do I get Chrome to handle images "smartly"? That is to say, have the default behavior show a magnifying glass cursor and provide auto-resizing?
(To clarify: I want this to work in a Chrome extension. The only solution I've come up with so far is to put a content script on all pages and manually change styling on images on the page. That solution sucks, so I'm hoping for a method that is less hacky and doesn't effect every page the user visits)
Try making the iframe refer to another html file and in that html file put the img tag with the width and height constraint. I think it will work on most browsers this way.
I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)