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.
Related
I am having more div over an image.and i am having zoom in and zoom out option to resize the image.when i resize an image, i want to resize the divs present over an image. How to achieve it using HTML and css.
The image needs to be placed as a background of a div and the other divs then need to be positioned absolutely against that div e.g. like this:
I am working ASP.net with C#,
I have a html div which is width 1000px then also i have some image which are different width.
My requirement when i put on the image to div it will show image automatically fill in the that div there is not seems blank space for the that html div.
Note: we have different image which is different width.
Is it possible ?
You need to use background-image on that div via CSS.
Read about background-size, and here you can see a demo of the different options.
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.
Evening front end wizards. I'm trying to do something that should be quite simple: I want to have images floated right or left in my body content, with a caption below each image. To try and achieve this I'm floating a div with the image inside it, followed by a span with a caption below. I've given the image max-width 100% so my layout is responsive.
Is there any way using just CSS and HTML that I can constrain the width of the containing div to the width of the image inside it? I'm finding that the span below pushes out the width of the div, whether it's display:inline-block or not. I'd like the span to always be the same width as the image, so the text wraps in line with the image's right edge.
I'd like to be able to use images of varying widths, so setting a max-width on the div doesn't really do the trick. I could do it easily enough with JQuery, but that would be cheating.
Any suggestions gratefully received! You can see what I'm talking about at http://jsfiddle.net/andfinally/yBHjK/
Try setting a max-width to the container and then width: 100% to the image. It should work.
Look http://jsfiddle.net/nMEVd/1/
It sounds like you want the containing div to expand it's width only for img elements and not span elements. Is that correct?
There is no pure CSS solution for this, JavaScript is the best way to achieve what you're after.
Two similar questions:
CSS: Force text to wrap (OR defining element width by only one of its children)
Limit text to the width of sibling image / auto width in CSS
You might want to try adding:
style="word-wrap: break-word;"
to the span elememt, or in a css sheet with:
.image span {
word-wrap: break-word;
}
Edit:
This should break the text in your span element to fit across two or more lines instead of stretching out past your image's width.
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)