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...;
Related
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/
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 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/
I had faced problem in right content center of page.
my HTML page is 2 column page left column is Fixed (height 100% and width 350px ) and right side content width is 575px so i want to right side content center in all screen for example screen width is 1600px so its take right side content center in 1250px (1600px-350px.
Thank you advanced
http://jsfiddle.net/md3Dp/5/
http://caniuse.com/#feat=calc
calc() is a native CSS way to do math. We can now set a dynamic width to the content column.
Desktop support for calc() is fairly ok. Added a fall back when calc() is not supported. Based on the max-width of 1600px of the parent added % width fall back.
html,body {
margin:0;
padding:0;
height:100%;
}
.left {
width:21.875%;/* fall back */
width:-moz-calc(350px);
width:-webkit-calc(350px);
width:calc(350px);
float:left;
background:red;
}
.main {
width:100%;
max-width:1600px;
margin:auto;
min-height:100%;
position:relative;
overflow:hidden;
}
.content {
width:78.125%;/* fall back */
width:-moz-calc(100% - 350px);
width:-webkit-calc(100% - 350px);
width:calc(100% - 350px);
float:left;
background:green;
}
You can use a relative parent.
Have a container for right content, absolutely position it and apply left equal to the fixed width of the left div, and apply right:0 to extend it to the remaining width.
Then simply make use of the old (hence having more browser support) margin:0 auto to position the content in center of right container div...
<div id='wrap'>
<div id='left'>one</div>
<div id='right'>
<div id='content'></div>
</div>
</div>
css
html, body {
height:100%;
}
#wrap {
position:relative;
height:100%;
}
#left {
display:inline-block;
width:150px; // in your case 350
height:100%;
border:1px solid;
}
#right {
position:absolute;
top:0;
left:150px; // width of left content
right:0px;
height:100%;
}
#content {
width:575px;
height:100%;
margin:0 auto;
border:1px solid;
}
JSFiddle
use jquery to calculate the width on the basis of screen resolution and then apply the width dynamically if you put the code here i can tell you the jquery code to how to apply the dynamically.
calculate the width on the basis of resolution you can get from this function in javascript:
window.innerWidth
Remove the float: left property from right_content div and add the text-align: center on the parent div i.e right one div.
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.