How can I achieve fluid width video? - html

I tried using the example for fluid width video and it works for the video but other typ of content (plain text comment) should not have the padding and now they get they padding resulting in a large gap of nothing with each comment that is not a video. Can you tell me how I can fix the layout so that all elements are fluid and responsive?
.abstract{
}
.abstract-inner {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.abstract-inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="abstract-container">
<div class="abstract">
<div class="abstract-inner">
<iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
</div>
The above is just a fragment, but I made a fiddle if it helps. Maybe you know what I should do to make the video have a fluid responsiveness and the text properly placed?
If I use only this CSS, then everything is fins except the height of the video that is too small:
.abstract{
}
.abstract-inner {
}
.abstract-inner iframe{
min-width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
max-height:100% !important;
}
If I use CSS viewport units then the page looks right in the fiddle but combined with my other code then the video get blown up larger than the page.
In this fiddle the problem is reproduced using CSS viewports when the page is resized to fit also the menu to the left.

I would use CSS viewport units in this case.
The code also becomes a lot simpler. (You may also find that some of the wrapper elements aren't necessary anymore)
iframe {
width: 100%;
height: 56.25vw; /* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
That's it.
Updated fiddle (Resize to verify that the iframe keeps aspect ratio)
NB:
If you only want the iframe to take up a certain % of the viewport width (say 80% ) - this can still be done while still maintaining the correct aspect ratio on the iframe .
FIDDLE (Resize the viewport width)
iframe {
width: 100%;
height: 56.25vw;
/* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
aside {
width: 20vw;
height: 100vh;
background: aqua;
display: none;
}
#media screen and (min-width: 900px) {
aside {
display: table-cell;
}
iframe {
width: 80vw;
height: 45vw;
/* 9/16 * 80 = 45 */
}
.content {
display: table-cell;
vertical-align: top;
}
.wpr {
display: table;
}
}
<div class="wpr">
<aside>blabla</aside>
<div class="content">
<iframe src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p>content here</p>
<p>content here</p>
<p>content here</p>
</div>
</div>

I think you can do similar thing like this
window.onresize = function(event) {
updateiframeSize()
};
function updateiframeSize() {
$(".abstract-inner").each(function(){
$this = jQuery(this);
var ratio_cont = $this.width()/$this.height();
var $iframe = $this.find("iframe");
var ratio_iframe= $iframe.width()/$iframe.height();
if (ratio_cont > ratio_iframe)
{
$iframe.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$iframe.css({"width": "auto", "height": "100%"});
}
});
};
if you want in css try
iframe{
width: 100% !important;
height: auto !important;
}
if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%

Related

Container's width not wrapping around width:auto <video>

As the title states, if I wrap <video>'s in a <div> container (to further add an overlay), which is set to relative; inline-block; height:100%; while <video>'s size is height:100%; width:auto It's all nice on initial page rendering, but as soon as you resize the page the videos shrink/grow, but the container's width remains the same.
Here is a codepen for you: http://codepen.io/MaxYari/pen/PqeOQY
Just try to change height of the window and see what I mean.
In another words - I want to make a container that will wrap around the <video> tag, which preserves its aspect ratio by its nature.
This div-video construct must fit into a bigger container-list.
Fit by the bigger side, depending on container-list orientation. i.e height: 100% for horizontal.
Separate CSS surely can be made for different orientations, therefore I just want to solve one case, presuming that it will solve both.
Edit: Updated Pen and added a border to video wrapper to illustrate it's nonwrappiness better.
In Firefox it looks like you could just change display: inline-block; to display: inline-flex; like so:
Example - Does NOT work in Google Chrome; For multibrowser solution with some JavaScript look down below
body,
html {
height: 100%;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0, 0, 0, 0.8);
}
.video_wrapper {
height: 100%;
display: inline-flex; /* see change here */
}
.video {
height: 100%;
width: auto;
}
<div id="videos">
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
<div class="video_wrapper">
<video class="video" autoplay src="http://techslides.com/demos/sample-videos/small.mp4"></video>
</div>
</div>
MDN Documentation
Can I use compatibility table
It looks like the only way to get it to work in Chrome is to force a repaint when the window is resized:
Working Example
$(window).resize(function () {
$('.video_wrapper').hide().show(0);
});
Chrome seems to have issues with fluid video, looks like it has something to do with the object-fit property, fortunately you can work around it with the method above.
You have not specified any width in the video wrapper
.video_wrapper {
height: 100%;
display: inline-block;
}
Add a percentage width like this:
.video_wrapper {
width: 100%;
height: 100%;
display: inline-block;
}
Actually just setting the .video wrapper isn't going to keep in it's container.
you're going to have to set a min-width for the body, html selectors. Use a fluid body width is what's causing to escape it's container.
so the new css would look like
body,html {
height: 100%;
min-width: 1024px;
}
#videos {
position: relative;
height: 30%;
background-color: rgba(0,0,0,0.8);
}
.video_wrapper {
height: 100%;
display: inline-block;
}
.video {
height: 100%;
width: auto;
}

Maintaining a videos aspect ratio in a responsive layout

I'm trying to maintain a videos aspect ratio in a responsive layout to prevent black edges when the layout changes size. So far, I've set up some media queries, but while re-sizing there are still some points that the video has black edges.
You can see the layout and video here http://smedia.lv/ (the SHOWREEL video).
The video is embedded from Vimeo with an iframe and it has a width and height of 100%. The video container width depends on the screen size and is also defined in %, the height is a fixed value.
How can I keep the aspect ratio of the video, so it doesn't have the black edges?
What you want is fluid width video.
Adding just a few styles to your container (.video) and the iframe will accomplish this.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
Checkout the example below.
Note:
You can use a media query to setup a breakpoint at which point the video will grow no bigger than 964.71x410.
You will need to update the padding-bottom, .video width, and media query to reflect the correct aspect ratio of your video if it changes.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
<div class="video">
<iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Responsive video iframes (keeping aspect ratio) with only CSS?

I usually use a similar solution to this one. Something like:
.wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.wrapper iframe {
position:absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
But this time I have no access to the HTML or JavaScript code so I can't use a wrapper to prevent the height:0.
Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?
Tried this (works with the iframe but not with its content):
iframe {
width: 100%;
background: red;
height: 0;
padding-bottom: 33%;
}
fiddle
Any thoughts? No need to support old browsers so even a CSS3 solution would be great.
Here is a Fiddle for a solution, that is based on a CSS2 secret: https://jsfiddle.net/59f9uc5e/2/
<div class="aspect-ratio">
<iframe src="" width="550" height="275" frameborder="0"></iframe>
</div>
<style>
/* This element defines the size the iframe will take.
In this example we want to have a ratio of 25:14 */
.aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}
/* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
.aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
It is explained by how percentage-values for padding are handled:
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.
https://www.w3.org/TR/CSS2/box.html#padding-properties
Use the new CSS viewport units vw and vh (viewport width / viewport height)
FIDDLE
iframe {
width: 100vw;
height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
background:red;
}
Browser support is also good: IE9+ (caniuse)
Calc function makes it much more readable:
.iframe-video {
width: 755px;
height: 424px;
max-width: 100%;
max-height: calc((100vw - 40px) / (16/9));
}
width and height is size for desktop and also fallback to ancient browsers
40px is margin (20 px between iframe border and viewport border on both sides)
16/9 is ratio of video (if you have edge-to-edge player)
With css aspect-ratio it's easy.
iframe {
height: auto;
width: 100%;
aspect-ratio: 16 / 9;
}
<div>
<div style="position:relative;padding-top:56.25%;">
<iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen
style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>
</div>
Please add this styling to the web url content you are trying to load. It will keep the 16:9 aspect ratio.
This is kind of hackish however you can use images to preserve the aspect ratio of a video. For example I went to paint and saved an image of 1280 x 720 resolution to use for a 16:9 aspect ratio (in here I will just grab a blank image off the internet somewhere).
This works because if you change the width of an image while leaving height auto, vise-versa the image will automatically scale - keeping proportions.
img {
display: block;
height: auto;
width: 100%;
}
iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.wrapper {
float: left;
position: relative;
}
<div class="wrapper">
<img src="http://www.solidbackgrounds.com/images/1280x720/1280x720-ghost-white-solid-color-background.jpg" alt=""/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
I had the same issue and this worked for me:
.wrapper iframe{
width: 100%; /* This Forces video to 100% of parent's width */
height:unset; /* This Overwrites the height attribute of Youtube's embed code */
aspect-ratio: 16 / 9; /* This adjusts video height to keep the desired aspect ratio*/
}

Make flash file scale to div width and maintain height according to its aspect ratio

We're having a problem to make a flash file scale 100% according to the parent div width, while still maintaining the height according to its aspect ratio.
Please check out the code on jsFiddle (http://jsfiddle.net/LgegF) or paste the below code into an empty html-page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://www.diescon.net/yellowfestival/400x400.swf", "flash-content", "100%", "100%", "9.0.0", '', null, {wmode: 'transparent'});
</script>
<style type="text/css">
body {
background-color: #ccc;
margin: 0;
}
#container {
width: 400px; /* Fixed width according to page template */
height: auto; /* Container height should adapt to the content, we do not want to set a fixed height here */
background-color: pink; /* Background of container */
position: absolute;
top: 0;
left: 0;
}
#flash-content {
width: 400px; /* Fill the width of the parent, could be fixed but ideally 100% */
height: 100%; /* We want the height of the flash object/flash content to scale according to the aspect ratio of the swf, we do not want to set a fixed height here */
}
/* This is what we really want */
#what-we {
width: 400px;
height: auto;
background-color: pink;
position: absolute;
top: 0;
right: 0;
}
#really-want {
width: 100%;
height: 400px; /* This is what we really want, but without setting this height fixed */
background-color: yellow;
}
</style>
</head>
<div id="container">
<div id="flash-content"></div>
</div>
<div id="what-we">
<div id="really-want">
<span>This is what we really want</span>
</div>
</div>
</body>
</html>
I have a similar problem and I find this page that was very useful:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Based on what I've learn on this article, I propose to change your HTML code to:
<div id="container">
<div class="videoWrapper">
<div id="flash-content"></div>
</div>
</div>
And to change your CSS code by adding:
.videoWrapper {
position: relative;
padding-bottom: 100%; /* 1:1 */
padding-top: 0px;
height: 0;
}
.videoWrapper object, .videoWrapper embed, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can see the result here:
http://jsfiddle.net/LgegF/56/
Hope this help.
PatBriPerso
It appears what you are looking for is
width: 100%;
height: auto;
Let me know how that works out.
-Brian
Ommit the css height declaration for the flash container alltogether. Swf's usually do scale (or you can set their scale behaviour in your embed/swfobject options), so if you just restrict the width, the height of the swf itself scales accordingly.
[edit:]
Working fiddle (with very rudimentary swf embed code): http://jsfiddle.net/LgegF/1/
You notice how the swf scales when scaling the browser. The white on top and bottom of the swf is due to the object inclusion, swfobject or the tags give you controll over how the swf itself scales (scale mode, align, valign, etc). What you notice though, is how the swf uses the container's width to determine its size, i.e. fitting the width and scaling the height accordingly.

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?
Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Also, height: auto; if you want to specify a width only.
Example: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
It turns out there's another way to do this: object-fit.
<img style='height: 100%; width: 100%; object-fit: contain'/>
will do the work. Don't forget to include other necessary attributes like src and alt, of course.
Fiddle: http://jsfiddle.net/mbHB4/7364/
Currently there is no way to do this correctly in a deterministic way, with fixed-size images such as JPEGs or PNG files.
To resize an image proportionally, you have to set either the height or width to "100%", but not both. If you set both to "100%", your image will be stretched.
Choosing whether to do height or width depends on your image and container dimensions:
If your image and container are both "portrait shaped" or both "landscape shaped" (taller than they are wide, or wider than they are tall, respectively), then it doesn't matter which of height or width are "%100".
If your image is portrait, and your container is landscape, you must set height="100%" on the image.
If your image is landscape, and your container is portrait, you must set width="100%" on the image.
If your image is an SVG, which is a variable-sized vector image format, you can have the expansion to fit the container happen automatically.
You just have to ensure that the SVG file has none of these properties set in the <svg> tag:
height
width
viewbox
Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file every time you export, or write a script to do it.
Here is a solution that will both vertically and horizontally align your img within a div without any stretching even if the image supplied is too small or too big to fit in the div.
The HTML content:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
The CSS content:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
The jQuery part:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
You have two ways of making the image responsive.
When an image is a background image.
#container{
width: 300px;
height: 300px;
background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
Run it here
But one should use img tag to put images as it is better than background-image in terms of SEO as you can write keyword in the alt of the img tag. So here is you can make the image responsive.
When image is in img tag.
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
Run it here
Make it simple!
Give the container a fixed height and then for the img tag inside it, set width and max-height.
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
The difference is that you set the width to be 100%, not the max-width.
You can set the image as the background to a div, and then use the CSS background-size property:
background-size: cover;
It will "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area" -- W3Schools
Check out my solution: http://codepen.io/petethepig/pen/dvFsA
It's written in pure CSS, without any JavaScript code.
It can handle images of any size and any orientation.
Given such HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
the CSS code would be:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
There are several ways to fit the image to <div>.
img {
object-fit: cover;
}
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
none - The image is not resized
scale-down - the image is scaled down to the smallest version of none or contain
You can find out more working samples here.
I have much better solution without need of any JavaScript. It is fully responsive, and I use it a lot. You often need to fit an image of any aspect ratio to a container element with a specified aspect ratio. And having whole this thing fully responsive is a must.
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}
<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>
You can set max-width and max height independently; the image will respect the smallest one (depending on the values and aspect ratio of the image). You can also set image to be aligned as you want (for example, for a product picture on an infinite white background you can position it to center bottom easily).
This solution doesn't stretch the image and fills the whole container, but it cuts some of the image.
HTML:
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
I just published a jQuery plugin that does exactly what you need with a lot of options:
https://github.com/GestiXi/image-scale
Usage:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
JavaScript
$(function() {
$("img.scale").imageScale();
});
I see that many people have suggested object-fit which is a good option. But if you want it to work in older browsers as well, there is another way of doing it easily.
It's quite simple. The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the image,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of object-fit:cover.
Here is a demonstration of the above logic.
https://jsfiddle.net/furqan_694/s3xLe1gp/
This logic works in all browsers.
The following works perfectly for me:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
I fixed this problem using the following code:
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
}
.container img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
A simple solution is to use Flexbox. Define the container's CSS to:
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/* Any custom height */
}
Adjust the contained image width to 100% and you should get a nice centered image in the container with the dimensions preserved.
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
As answered here, you can also use vh units instead of max-height: 100% if it doesn't work on your browser (like Chrome):
img {
max-height: 75vh;
}
I centered and scaled proportionally an image inside a hyperlink both horizontally and vertically this way:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
It was tested in Internet Explorer, Firefox, and Safari.
More information about centering is here.
Give the height and width you need for your image to the div that contains the <img> tag. Don't forget to give the height/width in the proper style tag.
In the <img> tag, give the max-height and max-width as 100%.
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
You can add the details in the appropriate classes after you get it right.
The code below is adapted from previous answers and is tested by me using an image called storm.jpg.
This is the complete HTML code for a simple page that displays the image. This works perfect and was tested by me with www.resizemybrowser.com. Put the CSS code at the top of your HTML code, underneath your head section. Put the picture code wherever you want the picture.
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
You have to tell the browser the height of where you are placing it:
.example {
height: 220px; /* DEFINE HEIGHT */
background: url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Edit: Previous table-based image positioning had issues in Internet Explorer 11 (max-height doesn't work in display:table elements). I've replaced it with inline based positioning which not only works fine in both Internet Explorer 7 and Internet Explorer 11, but it also requires less code.
Here is my take on the subject. It'll only work if the container has a specified size (max-width and max-height don't seem to get along with containers that don't have concrete size), but I wrote the CSS content in a way that allows it to be reused (add picture-frame class and px125 size class to your existing container).
In CSS:
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
And in HTML:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
DEMO
/* Main style */
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px32
{
width: 32px;
height: 32px;
line-height: 32px;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
/* Extras */
.picture-frame
{
padding: 5px;
}
.frame
{
border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>
Edit: Possible further improvement using JavaScript (upscaling images):
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
The accepted answer from Thorn007 doesn't work when the image is too small.
To solve this, I added a scale factor. This way, it makes the image bigger and it fills the div container.
Example:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
Notes:
For WebKit you must add -webkit-transform:scale(4); -webkit-transform-origin:left top; in the style.
With a scale factor of 4, you have max-width = 400/4 = 100 and max-height = 200/4 = 50
An alternate solution is to set max-width and max-height at 25%. It's even simpler.
A simple solution (4-step fix!!) that seems to work for me, is below. The example uses the width to determine the overall size, but you can also flip it to use the height instead.
Apply CSS styling to the image container (for example, <img>)
Set the width property to the dimension you want
For dimensions, use % for relative size, or autoscaling (based on image container or display)
Use px (or other) for a static, or set dimension
Set the height property to automatically adjust, based on the width
ENJOY!
For example,
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
All the provided answers, including the accepted one, work only under the assumption that the div wrapper is of a fixed size. So this is how to do it whatever the size of the div wrapper is and this is very useful if you develop a responsive page:
Write these declarations inside your DIV selector:
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
Then put these declarations inside your IMG selector:
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
VERY IMPORTANT:
The value of maxHeight must be the same for both the DIV and IMG selectors.
The simplest way to do this is by using object-fit:
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height: 100%;
width: 100%;
object-fit: cover;
}
If you're using Bootstrap, just add the img-responsive class and change to
.container img{
object-fit: cover;
}
If you're using Bootstrap, you just need to add the img-responsive class to the img tag:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Bootstrap Images
As seen in my 2014 Codepen example, I've made a solution that would work for any unknown combination of width/height (aspect-ratio) with the help of a as little javascript as possible, to change the CSS of how the image is centered when the aspect-ratio of the container changes above/below the aspect ratio of the image:
Try resizing the container by dragging the bottom right corner:
// Detects when the window width is too narrow for the current image
// aspect-ratio, and fits it to height 100% instead of width 100%.
const photo = document.images[0]
const onPhotoResize = new ResizeObserver(entries =>
window.requestAnimationFrame(checkRatio)
)
onPhotoResize.observe(photo.parentNode)
function checkRatio(){
const photoParent = photo.parentNode,
imageAspectRatio = photo.clientWidth / photo.clientHeight,
parentAspectRatio = photoParent.clientWidth / photoParent.clientHeight
photo.classList[imageAspectRatio > parentAspectRatio ? 'add':'remove']('max')
}
.box{
width: 20%;
height: 60%;
margin: auto;
position: absolute;
top:0; left:0; right:0; bottom:0;
resize: both;
overflow: hidden;
border: 5px solid red;
}
.box > img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.box > img.max{ width:auto; height:100%; }
<div class='box'>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg">
</div>
The solution is easy with a bit of maths...
Just put the image in a div and then in the HTML file where you specify the image. Set the width and height values in percentages using the pixel values of the image to calculate the exact ratio of width to height.
For example, say you have an image that has a width of 200 pixels and a height of 160 pixels. You can safely say that the width value will be 100%, because it is the larger value. To then calculate the height value you simply divide the height by the width which gives the percentage value of 80%. In the code it will look something like this...
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>