Can anyone tell me how this image is resizing? If you remove the bg from the page with firebug you will have a clear vision of the image.
http://canvas.is/images/logo_solid.png
I notice that when the page is scaled the width and height attributes apply and start to scale the image. I have looked through the page and there is no css indicating a percentage width or height and no js in sight.
How is this working?
Thanks
I would tentatively say this is a browser built-in feature as the url ends with image extension, browser know it's not html page, so it would render it in a different way.
Well, I still do not think there is something magical out there, in a normal html page, if you set a fixed width to an image, browser will resize its height automatically. It's more like this scenario:
<div class="image-wrapper">
<img width="100%" src="..."/>
</div>
image would be resized per its original ratio with the width change of image-wrapper
Related
I have a div with a specific size, which contains an iframe, sized 100%. This iframe loads an SVG-file that doesn't have height and width set, or is also sized 100%.
When zooming in IE or Chrome, everything is fine.
When zooming in Firefox, the following seems to happen:
The div is scaled up according to the zoom factor. The iframe is also scaled up because it fills out the scaled up div with its 100% size. The SVG in the iframe seems to be scaled up to fill the iframe, THEN the zoom factor is also applied to it so that it is now actually bigger than the iframe.
Example: https://jsfiddle.net/hz5ue94c/2/
<div class="wrapper">
<iframe class="frame" frameborder="0" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg">
</iframe>
</div>
Is there a way to stop Firefox from zooming the SVG?
Edit: I'm not sure if the problem is with the iframe or the SVG. If I have SVG directly in the div, the problem doesn't seem to occur, but I need to load the file into an iframe.
Thanks in advance!
I made an adaptive theme with Drupal 7.22, which works very fine. Unfortunately the size of the iFrame's opened by Colorbox are not adaptive.
To open them, I do the following:
<a class="colorbox" href ="http://mydomain.tld?width=800&height=700&iframe=true">Link</a>
But the width and height properties are hard-coded. How can I specify different values for the width and height properties based on the browser aperture/screen definitions?
For example, all screens which have a width between 0 and 1024px should have a colorbox iFrame with the following properties:
width=800px
height700px
and all screens which have a resolution greater than 1024px should have a colorbox iFrame with the following properties:
width=500px
height400px
Do you have any suggestion on how to make these adaptive?
Take a look at jRespond:
https://github.com/ten1seven/jRespond
that might be the easiest way to accomplish what you are looking for.
I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high.
I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions
add_image_size( "portfolio", 300, 200, true );
What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..
Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)
How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.
Thanks
You can use the max-height rule from css to limit the height of all images equally.
eg:
.gallery img{
max-height: (some height);
}
Use % or em for the height, pixels might not work as well in a responsive design.
When I insert an image to the Tiny MCE editor at Joomla! backend, I noticed that the inserted img tag don't have width and height param:
<img border="0" alt="Fruit" src="/szalafa/images/stories/fruit.jpg">
It is very time-consuming to set width and height for every image..
How can I force the editor to autocomplete the image dimensions?
Thanks!
ya its time consuming to set height and width for every image . I am also gone through this. Then i prefer to use css to control height and width.I think it will be good to use css to control this.
I have a menu made up of images and on a:hover I want to add a background image rather than simply doing image replacements (all in CSS, no JavaScript).
However, if I simply change the background image, while transparency and horizontal alignment are fine, it's just at the wrong vertical placement. No matter what I try the background image goes to the very bottom of the image and you see about a text height of background image below the main menu image.
Any ideas on how to fix this?
In it's simplest form it can be repeated as follows:
<html>
<head>
<style>a:hover{background:url('over.png');}</style>
</head>
<body>
<img src="item.png" style="border:0; " />
</body>
</html>
item.png is showing about 10 pixels of the top of its image at the bottom of over.png
Thanks.
Adding background-position: x y; still only shows the over.png at the bottom of the image and crops it to the height of one character.
Below shows the two images and what comes out on the right
It'd be easier to debug if you gave us a screenshot and some code. But it sounds like you might just need to position the background image within the element using background-position. You can use pixels, percentages or just top,bottom,left,right to place a background image wherever you want it within an element. http://www.w3schools.com/css/pr_background-position.asp. You might also want to look into image sprites for rollover effects. You would place the original and rollover images onto one file and simple change the background-position on hover.