Normally, the HTML <img> tag squeezes the image if the width or height attribute is smaller than the image itself. Is there a way to instead make it crop it if the specified size is smaller?
You can add the image as a background of a wrapper div and set the div's width and height. Or you can add a wrapper element around the img and set height and width to the wrapper element.
See
http://jsfiddle.net/nivas/zFMfj/
I don't think you can do this with the img tag by itself, however there are a number of ways you could do this with the image file and another tag (canvas->DrawImage, Div->Background Image or Div->Oveflow: hidden) for example.
Related
I pasted SVG code from illustrator and put inside a div.
The div has no height value. the height is set by the SVG
The Div show height with +2.67px
The SVG height is 30px like it should be but for some reason, there is an offset at the top you can see
the white thin line.
Why does it happen? is this a known issue?
Ok, so I tried and test and figure out it has something to do with display value.
when I changed the parent DIV to display:flex it was all the same height, sometimes the path still goes over the actual and tags but I guess it is because of the shape and pixel rendering
My div has a height of 105px.
My image inside the div has a height of 359px.
How can I override the size of the div so that the image doesn't cut off and the height of the image is full.
Many Thanks
Try using background-image on your div, than you can use CSS properties like background-position, background-size, background-attachment, to fit the image inside your div.
If you need examples search for background-image into e.g. w3school.
I want to make moveable world for my HTML game so I put 1600x1200 canvas inside my 800x600 div element and using left and top to move the world. I expected that div will clamp size of my canvas, but instead my canvas overlaps borders of my div. The div doesn't stretch, the canvas is scaled independently from the div.
I tried !important, max-width and max-height, different displays, nothing works. Using CSS for width and height just scales the canvas. I also tried putting my canvas into SVG as foreign object, but I get error "getContext is not a function".
So, how can I limit size of my canvas?
The div is going to expand to the size of your canvas unless the div has overflow: hidden; set in its CSS. The child element is larger than the parent element, and you haven't strictly told the browser to limit the sizing of the parent element.
The max-width and max-height attributes won't help you here because you aren't placing "wrappable" content within the div. If you put text in a div with max-width set, the value will be respected. If you put an element with an unchanging size, like an image or a canvas element, the browser can't dynamically wrap it like a bunch of floating divs or some text. In this case, you have overflow, which needs to be handled differently.
You can achieve what you're looking for by playing with the position and/or margin attributes for the canvas element once you set the parent div to hide the overflow.
I currently have a div on my page that I have given a background image. This div does not have any content and so it does not display on my page, if I add any content it displays. I would like it display even without content because I want that background image to show up as well as I would like to assign some hover/click events to it.
Is there any way to force the div to display?
You need to specify a size:
<div style="width: 100px; height: 100px"></div>
You can set the size to the dimensions of your background image, or any other values you desire.
You need to specify width and height of that div using css (or min-width and min-height)
Add a height and a width to the div. You may want to use min-height and min-width and set them equal to the size of your background image.
Adding an empty comment will help browsers that strip empty tags.
Add height and width to it.
Jsfiddle: http://jsfiddle.net/GFTtY/
Adding an empty //content// worked for me.
Setting width/height or min-width/min-height didn't force the background image to appear. (Chrome 51 on Win8)
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.