I'm trying to adjust the height of a picture by a percentage, rather than a pixel. However, when I use height: 30%; it doesn't work, but height: 30px; does work. What am I doing wrong?
My snippet is mind boggingly easy.
.imagebanner {
height: 30%;
width: 100%;
}
<img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" />
If you use a percentage value for height, the parent element needs to have a defined height (for example 100%), and this goes up to the body and html, so as a start you can begin with adding
html, body { height: 100%; }
and also give height definitions to all the elements in between body and your image.
Update your browser and then try. Sometimes if you're using old browser. New features of HTML don't work in old browser.
You need to set a 100% height on the parent element.
.imagebanner {
height: 30%;
width: 100%;
background: red;
}
.wrapper {
height: 200px;
width: 200px;
background: grey;
}
<div class="wrapper">
<img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner">
</div>
I'm trying to use a <img> tag to show a photo over another div, as some sort of overlay. However, the image won't scale to be inside of it's parent div (which is the body of the page). Instead it overflows the body. When I set overflow: hidden; to the body, you can't scroll over the page. I want the image to be full-height and fitted within the body (without enlarging the body).
This is basically the structure of the page:
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>
And the css:
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}
This is basically what is happening now:
The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
height in % will not work till you will use meta for height,
ok please use overflow:hidden at the place of overflow:none
make your image as background-image. I think it would be better.
Add a container in your body as shown,
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>
and do this in css
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}
The .container is responsible for setting a boundary and by using overflow: hidden, prevent content inside .container to overlap. While in the case of .imgContainer make sure the position is relative to container, absolute will pull itself out the flow, which is not safe in your case.
Can't resolve this issue. In other browsers everything goes fine, but IE ignores max-height rule for wrapped images. The idea is that image should fit to the fixed full-sized container (.wrap), and image container (.container) should have the same size as image.
For example, i have such code:
<!Doctype html>
<html>
<head>
<title>Title</title>
<style>
.wrap {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
max-width: 100%;
max-height: 100%;
}
.container img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img alt="Image" src="image_bigger_than_a_viewport.jpg">
</div>
<div>
</body>
</html>
Where source image should be bigger than a viewport size to let it scale down (you can just scale down browser window size).
Thank you.
UPD. Live demo: http://fiddle.jshell.net/egGQ7/show/
<html>
<head>
<style>
html, body {
background-color: red;
height: 100%;
width: 100%;
overflow: hidden;
}
* { margin: 0; padding:0; }
.topbar {
min-width: 100%;
min-height: 50%;
background-color: green;
}
.fill {
min-width: 100%;
min-height: 50%;
background-color: white;
}
.container {
min-width: 100%;
min-height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div class="topbar">
"topbar
<div class="fill">
"fill"
<div class="container">
"container"
</div>
</div>
</div>
</body>
</html>
Why "fill" is not taking the complete 50% of its containing element "topbar" on the screen?
Why "container" is not taking complete 50% of its containing element "fill" on the screen?
Separate Question:
My goal is to create a layout which can fit almost all screens desktops/laptops. I am not focusing on phone screen layouts for now. I am trying to use width and height as percentages for my layout. Please suggest if that is the right approach or point me to alternatives.
Because the body's height is uncertain.You need a parent dom
When you use percentage for height and width, it's important that the parent element has specific size in pixel...
in this case "topbar" class should have size in pixel
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>