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
Related
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 */
}
Im using css to resize an iframe in order to maintain the aspect ratio of the iframe (as described here : Responsive video iframes (keeping aspect ratio), with only css?).
.iframe-wrapper {
position:relative;
width:100%;
height: 0;
padding-bottom:58%;
}
.iframe-wrapper iframe {
position:absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
}
However, the problem i am facing is that for very wide screens this causes the iframe height to be large and the user has to scroll to view the content, which i want to avoid. So i am looking for a way to set a maximum value for.iframe-wrapper padding-bottom based on the viewport size. Something like this but for the bottom-padding:
max-height: calc(100vh - 200px);
Is there a way to do this?
Thanks :-)
If you want to maintain the same ratio then you could add a max-width of the screen height / your ratio (as the padding-bottom is dependant on the width) to a container div:
.container {
margin: 0 auto;
max-width: 178vh;// 100 / 56
}
.framewrapper {
background: pink;
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.framewrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
<div class="container">
<div class="framewrapper">
<iframe src="http://blar.com" width="20" height="10" scrolling="no"></iframe>
</div>
</div>
If not you would have to add a media query and fix the padding to 100vh, but then the ratio won't stay the same.
As elements with the padding-bottom trick are unaffected by the max-height property, the most efficient way to do this is to create a media query that switches the element to a different aspect ratio depending on your current browser width, like so:
.iframe-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 58%;
}
.iframe-wrapper iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#media (min-width: 1200px) {
.iframe-wrapper {
padding-bottom: 40%;
}
}
Recently I came across an situation of such issue of padding by % or max-padding. I found a very useful hackish way ... using of transparent image.
How it works? Foremost, I must say to use this method u need to set/definite max width/height which the container will go.
Example: You have 800x600 container + left/right padding of 50px(max)
Create 50x600 transparent image(s) ... duplicate if u need for both side.
Float your contend + padding(s) accordingly
Set padding(s) to 100% height
You now have responsive padding that scale with your main container
I beginning to learn css, and I am writing code based on a course am watching. The author has written the style for left bar images to look like this:
.left-side img{
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}
What's the use of width: 100% and height: 100%. Removing them seems to not have any effect.
The current image has original size of 32x32 pixels, you can replace the same image with other image of 512x512px,
width: 100% - no matter, what is the actual width of image, stretch it to 100% width of parent container
height: 100%; - no matter, what is the actual height of image, stretch it to 100% height of parent container
max-width: 140px; - if image is big, limit it to this value or if smaller, width100% will stretch it till 140px
max-height: 140px;- if image is big , limit it to this value or if smaller, height100% will stretch it till 140px
.left-side img {
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
}
<h1>image: 32X32</h1>
<div class="left-side">
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-32.png" alt="32X32" title="32X32">
</div>
<hr>
<h1>image: 512X512</h1>
<div class="left-side">
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/instagram-512.png" alt="512X512" title="512X512">
</div>
I'm trying to place a video into a container which has 100% width and auto height respecting the aspect ratio but with max-height set. I want the video to fill the entire container even if the sides are cropped and to be centered both horizontally and vertically.
I'm using fit-object property but apparently it doesn't work with max-height.
I'll simplify it with an image. The result should be the same.
HTML
<div>
<img src="...">
</div>
CSS
div {
width: 100%;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Now, if I add to div style height: 100px, it works. If I write max-height: 100px, it doesn't. Is this expected behaviour? If so, what can I do to make it work?
Here is jsFiddle: http://jsfiddle.net/1r4mLvLq/
height: 100%; works only if an ancestor element has an explicit height set.
You can accomplish that by adding this CSS:
html, body {
height: 100%;
margin: 0;
}
Updated Fiddle
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">