This is just an example code. I don't know how to limit the picture height and still have responsive #pictureContainer with object-fit: cover. Is there a more simple way to write this code. Any help would be appreciated.
html,
body {
padding: 0px;
margin: 0px;
}
#pictureContainer {
height: auto;
/*max-height: 100% <-- doesn't work */
position: relative;
}
.picture {
max-height: 100%;
width: 100%;
object-fit: cover;
}
<div id="pictureContainer">
<img class="picture" src="https://media.istockphoto.com/photos/brown-two-story-all-american-home-picture-id1158713117?k=20&m=1158713117&s=612x612&w=0&h=s_aoDM4KNoixI9qBLmJOBPMccoWsC11zxuBGGgFRiKY=">
</div>
Responsive images will automatically adjust to fit the size of the screen.
Add CSS:
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:
.responsive {
width: 100%;
height: auto;
}
for more information visit W3School
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" class="responsive" width="600" height="400">
</body>
</html>
I'm trying to make a simple centered popup div to show image inside of it. The popup div should have size of image but when image is bigger then page window it is overflow of its parent. I want to set on image max size to window size without using JS.
I'm trying do this, but it is not working, any ideas ?
body {
color: red;
}
.popup-window {
padding : 5px;
background-color: aquamarine;
display : inline-block;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
max-width : 100%;
max-height : 100%;
}
.popup-window>img {
object-fit: contain;
}
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="popup-window">
<img src="https://conpeek.com/test/przod_auta.jpg">
<!-- <img src="hubspot.png"> -->
</div>
</body>
</html>
PROBLEM RESOLVED
image style should look like this:
.popup-window>img {
max-width: 100vw;
max-height: 100vh;
}
and then when image is smaller then the viewport it have natural dimensions, but when it's bigger then viewport size, it's fitted to viewport correctly.
object-fit contain is a good way to go as you'll ensure the image can be completely seen. But for this to work the img element has to have width and height set (so the system knows what it's trying to contain the image within). Without those settings you just get the image at its natural dimensions.
body {
color: red;
}
.popup-window {
padding: 5px;
background-color: aquamarine;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: 100vw; /* added for demo */
height: 100vh; /* added */
}
.popup-window>img {
object-fit: contain;
width: 100%;
height: 100%;
}
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="popup-window">
<img src="https://conpeek.com/test/przod_auta.jpg">
<!-- <img src="hubspot.png"> -->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="stylesheet" href="profilepage.css">
</head>
<body>
<!-- Start your code here -->
<div class="profile-box">
<div class="bg">
<img src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
</div>
<!-- End your code here -->
</body>
</html>
profilepage.css
.bg {
width: 100%;
height: 10%;
}
Comes out like this: on my page
What I want is the width to cover the entire first row and the height to be 10% of the page. i.e.
Where the black line ends the img
I've been playing with width and height forever bu nothing is working. The moment I change width something large comes up. Even if I let the width be less. I don't know why width is changing the height. What am I doing wrong?
Percentage heights refer to the height of the immediate parent. If the parent height is not set, the CSS will do nothing. You can either cascade a 100% height setting down from the body tag or you can apply some fixed value to the image tag's immediate parent.
Fixed Value (Uses view height to refer directly to height of the body tag)
<div style="height: 10vh;">
<img style="max-height: 100%;" src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
Cascading Height
.bg {
width: 100%;
height: 10%;
}
body {
height: 100%;
}
.profile-box {
height: 100%;
}
html {
height: 100%;
}
img {
max-height: 100%;
width: 100%;
}
In both cases, we must restrict the image height by the parent class or no changes will take effect.
I used these sources:
How to make a div 100% height of the browser window
and
Make an image to fit its parent dimensions
Try this, You need to define height and width of every element otherwise the css don't know which element have what value.
body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.profile-box {
width: 100%;
height: 100%;
}
.bg {
width: 100%;
height: 10%;
}
.bg img {
width: 100%;
height: 100%;
}
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
This seems trivial but after all the research and coding I can't get it to work. Conditions are:
The browser window size is unknown. So please don't propose a solution involving absolute pixel sizes.
The image's original dimensions are unknown, and may or may not already fit the browser window.
The image is vertically and horizontally centered.
The image proportions must be conserved.
The image must be displayed in its entirety in the window (no cropping.)
I do not wish scrollbars to appear (and they shouldn't if the image fits.)
The image automatically resizes when the window dimensions change, to occupy all the available space without being larger than its original size.
Basically what I want is this:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
The problem with the code above is that it doesn't work: the pic takes all the vertical space it needs by adding a vertical scroll bar.
At my disposal is PHP, Javascript, JQuery but I'd kill for a CSS-only solution. I don't care if it doesn't work in IE.
Update 2018-04-11
Here's a Javascript-less, CSS-only solution. The image will dynamically be centered and resized to fit the window.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
The [other, old] solution, using JQuery, sets the height of the image container (body in the example below) so that the max-height property on the image works as expected. The image will also automatically resize when the client window is resized.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html>
Note: User gutierrezalex packaged a very similar solution as a JQuery plugin on this page.
Here is a simple CSS only solution (JSFiddle), works everywhere, mobile and IE included:
CSS 2.0:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML:
<body>
<img src="images/your-image.png" />
</body>
CSS3 introduces new units that are measured relative to the viewport, which is the window in this case. These are vh and vw, which measure viewport height and width, respectively. Here is a simple CSS only solution:
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
The one caveat to this is that it only works if there are no other elements contributing height on the page.
If you are willing to put a container element around your image, a pure CSS solution is simple. You see, 99% height has no meaning when the parent element will extend vertically to contain its children. The parent needs to have a fixed height, say... the height of the viewport.
HTML
<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>
CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
Play with the fiddle.
I know there's already a few answers here, but here is what I used:
max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
Resize Image to Fit the Screen by the Longest Side maintaining its Aspect Ratio
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
width: 100vw - image width will be 100% of view port
height: auto - image height will be scaled proportionally
max-height: 100vw - if image height would become more than view port it will be decreased to fit the screen, consequently image width will be decreased because of the following property
object-fit: contain - the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
Note: object-fit is fully supported only since IE 16.0
Make it simple. Thanks
.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="bg"></div>
For the future generations, if you want a solution that answers 1-6 and does 7 in a way that allows resize beyond to original size, I have developed a complete solution for this problem:
<!DOCTYPE html>
<html>
<body style="overflow:hidden; margin:0; text-align:center;">
<img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
</body>
</html>
My general lazy CSS rule:
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
This may zoom in on your image if it is low-res to begin with (that's to do with your image quality and size in dimensions.
To center your image, you may also try (in the CSS)
display:block;
margin: auto 0;
to center your image
in your HTML:
<div class="background"></div>
width: 100%;
overflow: hidden;
I believe that should do the trick.
I had a similar requirement, and had to do it it basic CSS and JavaScript. No JQuery available.
This is what I got working.
<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</head>
<body onload='FitImagesToScreen()'>
----
</body>
</html>
Note : I haven't used 100% for image width as there was always a bit of padding to be considered.
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
Or maybe check this out:
http://css-tricks.com/how-to-resizeable-background-image/
Building upon #Rohit's answer, this fixes issues flagged by Chrome, reliably resizes the images, and also works for multiple images that are vertically stacked, e.g. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg"> There is probably a more elegant way of doing this.
<style>
img {
max-width: 99vw !important;
max-height: 99vh !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
Use this code in your style tag
<style>
html {
background: url(imagename) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
</style>
I found this pure CSS solution on w3 and tested it work.
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("../yourimage.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>