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.
Related
i have two div in my html page like this image.
main div with background image has responsive technology. i have second div with face picture as main div content that show in above picture with red border, which its resizing should be correspond to the main div background in a way that it's Aspect ratio remains last value.
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
You have to manipulate the padding property on the parent div to get the desired effect of retaining the aspect-ratio. If you show me your code from some live website, I can further pin-point where you need to make the changes in your CSS.
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'm currently developping a Chrome extension (which means that I don't need a cross browser solution).
Basically, I want my web page to be separated into two parts. A left panel which would take 20% of the width and 100% of the height and a right panel which would take 80% of the width and 100% of the height. Those panels would contain various elements, textareas, list, select.
The issue is that I don't know how to achieve this and to handle resizement. Currently, I'm using jQuery with a window.onresize hook. I keep changing the width and height based on the window's size.
I want to know if that could be done in a simplier way, using CSS for instance. And what should I use? A div, a table, etc...
Thanks in Advance.
You could put the existing panel, or element divs & spans inside a containing relative div. If
you use position:absolute for the panel divs, they will then be positioned
absolutely, relative to the containing div, not the page body.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Please adding css into your div, add min-height, and max-height properties
#mydiv{
min-height: 700px;
}
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 made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.