Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".
ok if I do
.myImage{
width:50px;
height:100px;
}
then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom.
Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:
So how to do that?
1) Trim image with <div> and overflow:hidden:
div.trim {
max-height:100px;
max-width: 50px;
overflow: hidden;
}
<div class="trim"><img src="veryBigImage.png"/></div>
2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions
I would suggest using the CSS CLIP property to trim it to the size you want.
img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}
That way, if the image is small enough, nothing will get cut off. Otherwise, you trim it down.
You could wrap the img with a div and apply overflow: hidden;
HTML:
<div class="img-wrapper">
<img src="path/to/image.jpg" />
</div>
CSS:
.img-wrapper{
max-height: 100px;
overflow: hidden;
}
.img-wrapper img{
width: 50px;
}
By using max-width and max-height you can set height to whatever you want and the full image will display.
.myImage{
height:auto;
width:auto;
max-width:300px;
max-height:300px;
}
You need to put the image in a container of the desired trim size with overflow:hidden
html:
<div id="container"><img src="myimage.jpg"/></div>
css:
#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}
Related
I load images dynamically into my webpage and make them responsive:
<div id="images"><img id="dynamic_img" src=""/></div>
css:
#images{
height: 80%;
width: 30%
}
img{
max-height: auto
max-width:100%
}
Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto
Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?
Thanks in advance
Here you have an example where images are fitted horizontal and vertically.
I used
img {
max-width: 100%;
max-height: 100%;
}
Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/
Update
The key to achieve this is to set
html, body {
height: 100%;
}
<div id="images"><img class="img" src="" alt="" /></div>
.img
{
width=100%;
}
your div should have width=100% for example.
don't use max-width
you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width
I am trying to create responsive circle which fit on every screen size like this:
I tried some codes from but anyone not work properly according to requirement.
You should do it with SVG or 2x res PNG. It will be approximately the same size regarding bandwith but you'll get a better control and much faster render.
Try something like this:
<div class="container">
<div class="circle">
<img class="image" src="http://lorempixel.com/800/800/">
</div>
</div>
.container {
width: 100%;
background: #000;
}
.circle {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
background: #fff;
position:relative;
overflow:hidden;
z-index:2;
}
.image {
z-index:1;
position:absolute;
top:0;
left:0;
width:auto;
max-width:100%;
height:auto;
max-height:100%;
}
The circle should fit the container..
see on fiddle: http://jsfiddle.net/jimmynewbs/doan8b2f/
You can then create a div inside this for the text / image and set the image to a maximum width of 100% and width auto. this will make sure it doesn't get bigger than the circle. Positioning the image absolute can help keep it within the circle too if you wanted to make it expand out to the edges...
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}
On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I would like to resize them, preserving the aspect ratio.
I tried the max-width CSS property, but it doesn't work: the image's size doesn't change.
Is there any way to solve this problem?
HTML:
<div id="ImageContainerr">
<img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>
CSS:
img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }
I also tried setting the max-width: 600px for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).
You can write like this:
img{
width:100%;
max-width:600px;
}
Check this http://jsfiddle.net/ErNeT/
I see this hasn't been answered as final.
I see you have max-width as 100% and width as 600. Flip those.
A simple way also is:
<img src="image.png" style="max-width:600px;width:100%">
I use this often, and then you can control individual images as well, and not have it on all img tags. You could CSS it also like below.
.image600{
width:100%;
max-width:600px;
}
<img src="image.png" class="image600">
The problem is that img tag is inline element and you can't restrict width of inline element.
So to restrict img tag width first you need to convert it into a inline-block element
img.Image{
display: inline-block;
}
Given your container width 600px.
If you want only bigger images than that to fit inside, add:
CSS:
#ImageContainer img {
max-width: 600px;
}
If you want ALL images to take the avaiable (600px) space:
#ImageContainer img {
width: 600px;
}
Try this
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
Your css is almost correct. You are just missing display: block; in image css.
Also one typo in your id. It should be <div id="ImageContainer">
img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
<img src="http://placehold.it/1000x600" class="Image">
</div>
Wrap the element in a div with the fixed width/height:
<div style="width: 600px;">
<img src="whatever" />
</div>
If i have an image grid in css:
<div class="blockWall">
<div class="blockWallCell">
<a href="#">
<img src="img.gif" />
</a>
</div>
...blockWallCell repeats
<div style="clear:both;"></div>
</div>
with css:
.blockWall
{
width:800px;
}
.blockWallCell
{
float: left;
height: 100px;
overflow: hidden;
width: 100px;
padding:4px;
}
.blockWallCell img
{
border:none;
max-width: 100px;/* or max-height:100px;*/
overflow: hidden;
vertical-align: middle;
}
is there a way via css to make the tag fit the image wholly in the 100x100 .blockWallCell without setting the style of the to max-width:100px; or max-height:100px, i.e. if I don't know if it is a landscape or portrait image. I would like to use the overflow:hidden of the div to chop of the remainder of the non-scaled image.
What you've got right now should do the trick. You'll get a bunch of 100x100 divs with images that will fill as much of the 100x100 space as they can, with any overflowed parts hidden.
Do you want the .blockWallCell to be variable size, maxing out at 100x100? Or do you want the image to stretch out to fill the cell if it's smaller than 100x100 in either dimension?