I have seen lot of solution about this. The solutions are either for wider or taller image. But my problem is the image which need to keep in ratio, I have no idea it could be taller or wider.
Just give it width: 100% to make it responsive or adjustable to the parent's size:
.square {
width: 400px;
max-width: 100%; /* also make its parent responsive (advisable) */
}
.square > img {
display: block; /* removes bottom margin/whitespace, alternative: "vertical-align: bottom" */
width: 100%; /* responsiveness */
}
<div class="square">
<img src="https://placehold.it/1600x900" alt="img">
</div>
Related
Browser firstly is loading div with height 0,
and only after makes height equals image height.
Here are the screen shots : https://puu.sh/vR0Gp/10233ce94d.png
I want to make height as image height from the beginning to avoid repaints.
Here is the page: http://a4004cc1.ngrok.io/banner1.html
html of the banner:
<div class="home-top-box">
<div class="banner">
<img src="mobile-main.jpg" width="750" height="500">
</div>
</div>
css of the banner:
.home-top-box .banner{
position:relative;
height:auto;
width:100%;
display: inline-block;
}
.home-top-box .banner img{
width:100%;
}
Tried changing height to 100%, using min-height - those still didn't solve the problem.
Try changing this so that the parent has an inner padding that matches the image aspect ratio. http://i.imgur.com/2viiD35.png http://i.imgur.com/7k8uszJ.png
.home-top-box .banner {
position: relative;
height: 0;
/* width: 100%; */
/* display: inline-block; */
padding-bottom: 66.6%; /* (500 / 750) * 100 = 66.6% */
}
If you know the image aspect ratio, then you could recalculate your height using jQuery:
$.ready(function(){
$("div.banner").height($("div.banner").width()/750*500);
});
You shold take in account some padding, margins and borders, or make them zero if possible.
I have a scenario in which images of varying dimensions appear in a column that's 50% page width.
On large screens where the column width exceeds an image's native width, the image should render to its native width while still being fluid.
Image dimensions vary (i.e. landscape vs. portrait orientation), so no single width or height can be applied to the img element. I can constrain parent element to a max-width that matches the largest image width that will display, but images of lesser widths expand too wide once made fluid.
The basic structure is:
<div class="column">
<figure>
<img>
</figure>
</div>
With this CSS:
.column {width:50%;}
.column figure {
display:block;
margin:0 auto;
width:100%;
max-width:800px; /* the largest image width */
text-align: center; /* to center images of lesser width */
}
.column img {?}
I can add a data attribute to the img element indicating orientation, using this to apply max-width, but this requires more work for site editors, which I need to avoid. Hence, I seek a CSS-only solution...but I'm stuck.
Any ideas?
How about using max-width again, allowing the image to fully expand to the width of its container, but not larger? Something like:
.column img {
max-width: 100%;
}
This will allow the image to be responsive as needed - scaling with the size of its parent, but never exceeding its native width. Here's a demo with some random images - note how the natively smaller and larger image stop at different widths when given enough space:
.column {
width: 50%;
}
.column figure {
display: block;
margin: 0 auto;
width: 100%;
max-width: 800px;
/* the largest image width */
text-align: center;
/* to center images of lesser width */
}
.column img {
max-width: 100%;
}
<div class="column">
<figure>
<img src="http://www.ltsgrill.com/wp-content/uploads/2014/09/red_lobster.jpg" />
</figure>
</div>
<div class="column">
<figure>
<img src="http://www.mjseafood.com/_assets/400x300/Crayfish.jpeg" />
</figure>
</div>
First, please consider this fiddle.
I need to get some links over specific image regions, however those images are scaled according to the parent size...
that's why the link's position and size are relative(percentages) to the image.
But the fiddle shows the problem of this approach.
Is there anyway to get the .image-wrapper to "mimic" the img size and position after scaled?! Any trick or whatever?
Note: I'm OK with webkit-only solutions!
Edit 1
Actually I'm more focused in making the image fit on the content div, then making the image wrapper follow the resulting image size. Here's what I achieved so far...
Now I'm trying to get it working with the image centralized.
Here is the CSS skeleton for a solution.
Suppose your HTML looks like the following:
<div id="content1" class="content portrait">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/200/250" />
</div>
</div>
</div>
<div id="content2" class="content landscape">
<div class="panel-wrapper">
<div class="image-wrapper">
<img src="http://placekitten.com/300/200" />
</div>
</div>
</div>
The HTML is similar to your original code except that there is an extra wrapper .panel-wrapper.
I used the following CSS:
.content {
background: lightgray;
display: table;
margin: 40px 0;
}
#content1 {
width:100px;
height:150px;
}
#content2 {
width:150px;
height:150px;
}
.panel-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.image-wrapper {
outline: 1px solid green;
position:relative;
display: inline-block;
}
.content img {
display: block;
width: 100%;
}
.portrait .image-wrapper {
height: calc(100% - 2px);
}
.portrait .img {
height: 100%;
}
.landscape .image-wrapper {
width: calc(100% - 2px);
}
.landscape .img {
width: 100%;
}
.sample-link {
background:rgba(0, 0, 255, 0.3);
position:absolute;
display:block;
width: 50%;
height:20%;
top:5%;
left:5%;
}
I apply display: table to .content and display: table-cell to .panel-wrapper so that I can get a get the image centered both vertically and horizontally.
The .image-wrapper has display: inline-block.
To get the scaling right, you need to consider two cases depending on the aspect ratio of the image.
For portrait images, apply height: 100% to the .image-wrapper and the child img.
For landscape images, apply width: 100% respectively.
If you have a border on .image-wrapper, use the CSS calc() function to adjust for the 2px width of the borders.
What you need to do is use JavaScript/jQuery to determine the aspect ratio of the image and then apply the correct class (.portrait or .landscape) to the .content block.
See demo at: http://jsfiddle.net/audetwebdesign/SZjvJ/
A possible way is to work with image ratio and to adjust link ratio and margins according to image dimensions, with Jquery.
Have a look at this example fiddle: http://jsfiddle.net/t7Ucj/
The Js measures width and height of the image and according to its ratio, it works on the width or on the height of the link.
var width = $('#content2 img').width();
var height = $('#content2 img').height();
//vertical image
if(height > width){
var left = $('#content2 img').css('margin-left');
$('#content2 .sample-link').css({'width': width, 'left' : left});
}
else{
var top = $('#content2 img').css('margin-top');
$('#content2 .sample-link').css({'height': height*0.2, 'top' : top + height*0.4});
}
Then you can wrap all the instructions in a simple function obviously.
I know it can be tricky to put all the possible cases but i had a similar problem and solved in this way.
hope it helps
I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.
My code so far (I used colors as a visual aid)-
css:
#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }
html:
<html>
<body>
<div id="leftside"> </div>
<div id="container">the content</div>
<div id="rightside"> </div>
...
So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?
Thanks for the help.
you can achive by doing this with css
#maindiv{
width:1000px;
}
#rightdiv, #leftdiv{
width:calc((100%-1000)/2);
}
#rightdiv{
//other styles
}
#leftdiv{
//other styles
}
test browser support for calc()
You'd have to inject some javascript code:
$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);
See demo
Then use media queries to change the middle div's width when the screen gets smaller.
One way is to put the divs in a table with one row and 3 cells. The table will have width 100% and you can set the width of the centre td.
I'm sure someone will suggest a better way in CSS though.
A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT:
To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.
If you specify the image's width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn't mean 50% of the original image width -- it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.
The solution is simple -- specify the dimensions in pixels, ems or any other unit other than a percentage:
HTML
<div class="wrapper">
<img class="small" src="myimage.jpg">
</div>
CSS
img.small {
width: 150px; /* or whatever you like */
display: block; /* to avoid empty space below the image */
}
div.wrapper {
display: inline-block;
border: 1px solid #000;
}
Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here's an example that does that:
HTML
<div class="wrapper big">
<img src="myimage.jpg">
</div>
<div class="wrapper small">
<img src="myimage.jpg">
</div>
CSS
img {
display: block;
width: 100%;
}
.wrapper {
margin-top: 1em;
border: 1px solid #000;
}
.big {
width: 600px;
}
.small {
width: 300px;
}
So I go height="50%", say, and width="auto" (to maintain AR).
Why not just go width="50%" too as this would resolve it.
I think Pär's approach is right: don't do { height: fix; width: auto; } but do instead { height: auto; width: fix; } Works better.