I called a background image in css to make an image map. The way I've done so seems to have made difficult to resize without it cropping from the origin point. Here is my current css for calling the image.
ul#LittleItaly {
list-style: none;
background: url(images/Littleitaly_Map.jpg) no-repeat 0 0;
position: relative;
width: 1200px;
height: 1600px;
margin: 0;
padding: 0;
}
When I change the width or height it cuts off parts of the image. Similar to Photoshop changing canvas size.
background-size:cover
it should do the trick
Related
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I'm using the technique from this answer to create a DIV that maintains its aspect ratio when the browser viewport is resized.
However, I want the DIV to only get so big and then stop. But, if I apply max-width: 300px; to the containing div, the div will stop expanding its width when the viewport gets big enough, but the height keeps going, losing the aspect ratio. If I apply max-height: 60px;, it has no effect whatsoever.
How do I get a div to expand with the width of a viewport, maintain its aspect ratio, and stop expanding both height and width at a specified maximum width?
Live code here.
body {
width: 36%;
margin: 8px auto;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
max-width: 300px;
background: blue;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
It looks like the issue is because of the padding which increases the height by % based on resize
below is the example in which i have added box-sizing:border-box; and gave height which on resize remains the same
http://dabblet.com/gist/85df841bd1602d24829f
One possible solution seems to be to simply create a containing div around the wrapper div, and apply max-width to that.
For what it is worth, I am using foundation:
I have two divs in a single row. I would like to fill the entire right div in its entitreity with an image that maintains its aspect ratio.
That is, rather than distorting the image, I would like to scale the image until the shortest side reaches 100%, while the longer side is hidden beyond the bounds of the container.
I don't have a preference on whether this is done with an img tag or a css background image.
Here is what I have so far, but the image gets distorted as the window is resized:
#demo {
min-height: 100%;
padding: 0;
overflow: hidden;
img {
min-height: 100%;
max-width: 100%;
position: absolute;
left: 0; bottom: 0;
}
}
You could try setting it as a background image in the css and then use : background-size:cover; or.... background-size:contain; depending on your preference/need. But you may need to set the div size at that point. Such as min-width/min-hieght.
try with height:auto and width:px or %
img {
height: auto;
width: 100%;
}
<img src="http://placeimg.com/640/480/any">
I already input width: 100% but it wont respond on anything. How do I get the header to respond on all browsers and ipads, phones, etc?
.head-wrap {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-prodigy-dumbell-weight.jpg) top no-repeat;
margin: 0;
height: 480px;
width: 100%;
}
.site-header {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/Prodigy-Performance-we-are-prodigies4.png) no-repeat;
margin: 0;
width: 100%;
height: 420px;
}
.site-header .wrap {
padding: 16px 0;
padding: 1rem 0;
}
You can try setting the background-size style of the header to 100%; You may be dealing with some browser compatibility issues (see here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
You could also remove the background-image property, and fill the content with plain img elements, with absolute positioning, then set those img elements to be width: 100%;
Your div is also constrained to a height of 420px which is going to screw things up. Set a max-height of 420px, and a height of auto (see here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
You'll probably have to make your two background overlapping background images the same size (since the dimensions are different they might have different ratios of width/height), and use some media queries to clean things up, though, to make it work 100%.
i am in a Dilemma here.
i am working on a modal gallery and the image css set to resize accoring to the browser window. Now i need a div around it so that i can place some text or buttons on it.
the image is resized fine but i am not able to set the containing div according to the image size.
I tried using the border red for containing div but it failed.
Please help.
here is a Fiddle to help you see what i am trying to do.
thanks.
Here is the CSS Code
#imagePlaceholderContainer {
border: 3px solid Red;
}
#imagePlaceholder {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
max-height: 80%;
}
HERE IS THE FULL CODE-->
FIDDLE
Get rid of position: fixed, otherwise you must specify a width and height on the parent #imagePlaceholderContainer.