I have a div with a height of 300px. I want to have one or more child images that scale according to this height.
It works great when I use an img with the #src CSS below. Width and height are not defined as pixel resolutions so it scales as it should if I changed the height of #wrap.
Is it possible to do the same with CSS backgrounds (no Javascript) without defining a pixel width/height? I can set a width of 100% and place a max-width in there but that restricts the image to the max-width, and if the image is smaller than the max-width, there will be a gap to the right (which can be very large depending on the value of max-width).
Thanks!
#wrap
{
width:100%;
height:300px;
}
#src
{
display:inline-block;
width:auto;
height:100%;
border:1px #0f0 solid;
}
#bg
{
display:inline-block;
background-image:url(https://i.imgur.com/6672G7J.png);
background-repeat:no-repeat;
background-size:contain;
width:auto;
height:100%;
border:1px #f00 solid;
}
<div id="wrap">
<img id="src" src="https://i.imgur.com/6672G7J.png" />
<div id="bg"></div>
</div>
If I understand you correctly... you can use background-size: cover; and then the image will fill the entire parent container without needing to specify a width or height
Are you looking for background-size: cover to have the largest dimension applied instead of the smaller?
The trick is to set the div's height to 0 and then set the padding-top to a ratio of the height/width. See https://stackoverflow.com/a/22211990/40161
#bg
{
display:inline-block;
background-image:url(https://i.imgur.com/6672G7J.png);
background-repeat:no-repeat;
background-size:contain;
width:100%;
height:0;
padding-top: 100%; (Height/Width)
border:1px #f00 solid;
}
Note: I changed width to 100%. This will make it take up all available room. But if you want it 100px as your original example, you'd need a wrapper around the div to constrain the size. See https://jsfiddle.net/1x6p33f9/1/
Related
I want to show list thumbnail box as data grid. each thumbnail image has to be placed in frame with specific width and height (for consistency) as follow:
<div class='frame'>
<img src='img1.jpg' />
</div>
<div class='frame'>
<img src='img2.jpg' />
</div>
By setting image width and height to frame, images change to wrong aspect ratio and for smaller size image than frame, they are stretched to frame (I don't want to effect smaller size image). How can I fit image within frame without effecting aspect ratio of image. my next question is how can I set image to center of frame whatever the size is. should I do this with javascript? Please help me
Without JS, you can use max-width/max-height to keep the images in the boundaries of the .frame elements. With width:auto; and height:auto the images will keep their original aspect ratio and won't be stretched over their original size.
To center the images horizontaly and verticaly in the frames, you can use :
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
DEMO
Full CSS :
.frame{
width:300px; height:300px;
display:inline-block;
border:1px solid teal;
position:relative;
}
.frame > img{
max-width:100%; max-height:100%;
width:auto; height:auto;
position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
}
you cannot fit both width and height in frame to maintain aspect ratio. you can set either max-width or max-height value of image to 100% to fit in frame. try my code. I am using this method in my projects. I use wrap and inner to get border and padding in frame.
no javascript is needed for fitting image. but you have to use to center your image in frame as width and height of individual image are dynamic value. my sample set image's max-width to fit in frame.
HTML:
<div class='wrap'>
<div class='inner'>
<img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
</div>
</div>
CSS:
.wrap{
padding:10px;
border: 1px solid #777;
width: 150px;
height: 100px;
overflow:hidden;
float:left;
margin: 0px 20px 20px 0px;
}
.inner{
width: 100%;
height: 100%;
overflow:hidden;
text-align:center;
position:relative;
}
.inner img{
max-width: 100%;
position:absolute;
left:0;top:0;
}
Javascript:
$("img").each(function(){
var top_dif= ($(this).height()-$(this).parent().height())/2;
var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});
have a look my samples:
debug http://jsfiddle.net/7LLh14wL/3/ (overflow:visible)
final http://jsfiddle.net/7LLh14wL/4/ (overflow:hidden)
You should set only the width or height and not both, it will keep the ratio.
Using max-width and max-height will help for the smaller images.
However, you will need JS to center the larger images.
use this snippet
JS
$(".frame").each( function(){
var imageUrl = $(this).find('img').attr("src");;
$(this).css('background-image', 'url(' + imageUrl + ')');
$(this).find('img').css("visiblity","hidden");
});
Css
.frame{
background-size:cover;
background-position:50% 50%;
}
I'm tearing my hair apart here. Does anyone know how i can get a div to fill the screen both horizontal and vertical? I can make it fill it horizontal but it just refuses to fill vertical unless a specify the width in pixels. What am I doing wrong?
This is what I want to accomplish, without have to scroll to get the bottom-padding:
Thank you!
HTML:
<div id="main">
<div class="main_content"></div>
</div>
CSS:
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padding-left:40px;
padding-right:40px;
padding-top:40px;
padding-bottom:40px;
}
.main_content {
width:auto;
height:100%;
background:#fff;
}
When you set a percentage height it is related to its container, that must have an explicit height. If you set height: auto, the container will take the height of its content. The parent of the div must have an explicit height property, you can set in 'px' or in 'em'. You can also set in 'vh'
you can add height:100vh;
Demo : http://jsfiddle.net/6yLhk17h/
Add the below code in your style sheet.
html{
height: 100%;
}
I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: How do I auto-resize an image to fit a div container), but this only works for me when the image is directly in the div thats height is specified in pixels.
I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).
It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?
css:
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
html:
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
I want to fit a png image to the height of a div that is inheriting
its height from another div.
Technically, logodiv is not inheriting its height from topbar. Its simply expanding itself according to its content(the image in this case).
Try adding the property height:inherit; to second div and you are good to go.
HTML
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
CSS
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
height:inherit;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
Fiddle
Try this css:
#topbar {
width:100%;
height:45px;
border:1px solid red;/* for highlighting*/
}
#logodiv {
float:left;
height:inherit;
}
/*To clear float */
#topbar:after {
clear:both;
display:block;
content:""
}
#logodiv img {
max-height:100%;
}
Demo : http://jsfiddle.net/lotusgodkk/4d4L1g0a/
Is there a way how to auto resize the height of an image using CSS?
I have a menu in left side of the website. Image size is 216 x 504.
The width is okay but the height of the image will be auto resized depends on the monitor screen resolution.
Here's my HTML:
<div class="menu-bg">
<img src="image/bg_menu.png" alt="" />
</div>
Here's my css:
.menu-bg
{
position:absolute;
top:130px;
left:0px;
height: auto;
}
The height: auto; is not working. I already tried to google but the result is always the height:auto which is not working.
I'm using Mozilla Firefox as a browser.
Any comments are appreciated.
Thank you
.menu-bg img{
height:auto;
}
Use this css and try
What you are doing is giving an auto height to the container not to the image.
try this jquery
$(document).ready(function() {
var height = $(window).height();
$('.menu-bg').css('height',height);
});
For an element with position: absolute you have to define at least a width or height, in px or %, but a percentage value only if the parent element has a definition for that parameter - auto width will always be 100%, but auto for height without a height setting for the parent element won't work.
You can use media queries to control the height of the image according to resolution. You would go about using the max-height property.
Try this:
.menu-bg {
height:100%; /* remove this if it doesn't work at first */
position:absolute;
top:130px;
left:0px;
}
.menu-bg img {
height:auto;
}
did you try this:
.menu-bg{
position:absolute;
top:130px;
left:0px;
height: auto;
border:2px solid red;
width:216px;
max-height:504px;
height:80%;
}
.menu-bg img{
width:100%;
height:100%;
}
the "height:80%" can be adjusted to your needs...;
I have an image I'd like to show in a browser such that:
If the image is smaller than the browser viewport, the image is centered
horizotally and vertically.
If the image is larger than the viewport, the image is scaled down to fill
as much of the viewport as possible without adjusting the aspect ratio of the
image. Again, the image is centered horizotally and vertically.
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
#GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
Demo
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
Demo
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Demo
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.
To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.
You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.
Css
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
HTML
<div id="container">
<div id="img">
</div>
Edit
Set image as background?
Then set the body to 100%.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.
Anyway, a JavaScript solution is better. Hope it helps.