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">
Related
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
The image is stretched when I try to make the size smaller.
http://jsfiddle.net/QEpJH/878/
.container img {
display: block;
width: 100%;
height: 60vh;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
You need to make it scalable by 1:1
so use
width: auto; instead of width:100;.
or use height: auto; and width: 100%; in case you want to cover the whole width.
But remember if you cover the whole width, the height will increase.
If you set the width to auto, the image will adjust itself to the given height without any stretch.
.container img {
display: block;
width: auto;
height: 60vh;
}
if you set the image as a background instead and use
background-size:cover
you will lose the stretching but some of the image may get cut off
to counter this slightly you can use
background-position
to position the image in a more desirable place
Try ratio in only percentage or use similar ratio
.container img {
display: block;
width: 30%;
height: 30%;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>
I would like, using CSS only, to have an image stretch to the max width of a container div, keeping aspect ratio, without using background images. However, if the height of the image exceeds X then it should be limited by that. The following doesn't cause the image to go 100%. If I set that then it becomes stretched if the height exceeds 200px.
.container {
width: 200px;
position: relative;
}
img {
position: relative;
max-width: 100%;
max-height: 200px;
}
<div class="container"><img src=""></div>
Here's a fiddle to play with: http://jsfiddle.net/cyberwombat/agfy1cfm/4/
Try just setting the height:
img {
position: relative;
max-width: 200px;
max-height: 50px
}
where the values of max-width and max-height match the dimensions of the container.
I suggest to use instead this, more flexible:
img {
max-width: 100%;
max-height: 100%;
height: auto;
}
With this, you can use whatever aspect-ratio image you want, being sure that the images will remain responsive
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.