I tried few links but dint get anything fruitful.
I am working on this
http://www.w3schools.com/cssref/pr_pos_clip.asp
but in my case I need to clip the image on "%" rather than putting some predefined px values.
However I can not do this .
How to achieve that ??
The Clip property doesn't support percentages (yet). To achieve that effect, you can either:
1) Wrap the image in a div, set percentage width and height and overflow: hidden; For example:
<div id="test">
<img src="https://www.google.com/images/srpr/logo11w.png">
</div>
div#test {
width: 200px;
height: 100px;
overflow: hidden;
}
JSFiddle
2) Instead of the image, use a div with percentage width and height and the image set as a background-image.
3) Use javascript to calculate the required width and height after the image has been rendered and work with that.
If you want to do it in percentages, you can achieve it with an additional extra wrapper div with dimensions same as image.
Try following CSS and HTML.
HTML
<div class="wrapper">
<div class="imgContainer">
<!-- NOTE: image dimensions are same as in "wrapper" class-->
<img src="path/to/img.jpg" width="200" height="140" />
</div>
</div>
CSS
.wrapper{
width : 200px;
height : 140px;
}
/* Below width and height are in percentage w.r.t. those in
'wrapper' class whose width and height are same as image.
*/
.imgContainer{
width : 50%;
height : 50%;
overflow : hidden;
}
Check this fiddle.
Related
I have some HTML like this:
<div id="wrap">
<p>blah blah ... </p>
<img style="width:100%" src="..." />
<p>blah blah ... </p>
</div>
The image would “flash” before its rendering - because its height is 0 if you don't declare it in the CSS. This is very annoying for my users.
However, I tried something like this:
img {height:calc(width/2)}
or this:
img {height:50%}
It's not working.
I have many pages like this and all the images are in a 2:1 width/height ratio.
Is there anything I can do in Pure CSS to make the image element as big as of the rendered size, so that before its loading, it won't break the page's layout.
By “Pure CSS” I mean, there should not be extra JavaScript or HTML. For instance, the img is the child of div#wrap and I want it remains this way.
Update:
I found another answer suggest me to use calc(100vw * .5). However, this doesn't solve my question. 100vw is a fixed width - the width of the viewport. What I want is something like calc(100 * this(width) * .5).
Thanks
To avoid Cumulative Layout Shift while the image is loading you would need to use a wrapper. I know this is not what you asked for but as far as I am aware there is no other way than to alter the HTML.
The trick is to create a 0 height wrapper with padding the same height as your aspect ratio.
So in the example below I have 3 images with an aspect ratio of 16:9 (or 2:3). As such I create container with the correct padding height using calc(100% * 2/3).
This will then be covered by the image once it loads.
The .container is purely to let you see all the images load in.
It does rely on your knowing the image aspect ratio before it loads.
.container{
width: 15%;
}
.image-wrapper {
width: 100%;
height: 0;
padding-bottom: calc(100% * 2 / 3);
position: relative;
border: 2px solid #333;
}
.image {
width: 100%;
position: absolute;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="https://placehold.it/3000x2000.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="https://placehold.it/4500x3000.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="https://placehold.it/3750x2500.jpg" />
</div>
</div>
Chrome and Firefox
Chrome and Firefox has both introduced native aspect ratio space saving (I do not know the proper name for it as you can probably tell!)
If you give you image a width and height the browser will allocate space for it, even if the image itself is a different size than specified.
please note - you must give the image a width and height of 100% for this to work.
Notice how in the following example the widths and heights I have set are aspect ratio relevant but do not affect the container size. Obviously set these widths and heights to something more sensible in production.
.container{
width: 15%;
}
.image{
border: 2px solid #333;
width: 100%;
height: 100%;
}
<div class="container">
<img class="image" src="https://placehold.it/3000x2000.jpg" width="6" height = "4"/>
<img class="image" src="https://placehold.it/4500x3000.jpg" width="3" height = "2"/>
<img class="image" src="https://placehold.it/3750x2500.jpg" width="3750" height = "2500"/>
</div>
You need to have both attributes, width and height, like:
img {
width: 100%;
height: 50%;
}
Although it will usually work if you only have either width or height, your situation is probably a bit different in that you are using percentages to deal with the image width and height.
Just add a class or id to the image and set it to width:100% and height:100%. Keep in mind that it will always be a 100% of the parent div in this case. Here's a very simple fiddle for you
I've been looking for an answer to this. I'd prefer a solution with just CSS, but I've been unable to find one.
I've got a popup of a fixed width, and it will grow in height if the contents are larger. Inside, I put an image which should take half of the popup while maintaining aspect ratio and being as large as possible without going off the screen, and a div to hold information about the image, which should also be half the screen, so that the image and div are side-by-side. Example here: https://codepen.io/Smarticles101/pen/WdmZLx
I can set a height on the image of 90vh to make it larger and a max-width of 50% to make sure it only takes half of the popup. However, if the window shrinks in width or if I make the fixed width of the popup smaller, the image will maintain height and max-width, thus not maintaining aspect ratio.
How can I make the image maintain aspect ratio while it shrinks in width?
Html:
<div id="popup">
<img src="https://images.freeimages.com/images/large-previews/12d/frangipani-02-1311438.jpg" alt="image" />
<div id="sidedata">
<h1>Image</h1>
<p>Some data about the image here</p>
</div>
</div>
<br />
<div id="popup">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" />
</div>
CSS:
#popup {
max-width: 50%;
background-color: blue;
}
img {
height: 90vh;
max-width: 50%;
/*
The image will not maintain aspect ratio if the max-width is reached, it will maintain height as whatever it was set to originally rather than shrink in height.
*/
display: inline-block;
}
#sidedata {
max-width: 50%;
display: inline-block;
}
short anwser, hope that will help, try with max-height :
img {
max-height: 90vh;
max-width: 50%;
display: inline-block;
}
This may come off as basic, but I'm new to img tags. On this website morningsignout.com, I want to resize the images so that they're smaller. I learned about editing their img tag properties in firebug with "height="40%"", but it doesn't seem to work on any of the article's main images. How do I resize them in html?
I'm presuming that you want to resize the image according to the height of the view window. To do that, you can use the vh unit in css. 100 vh units is the height of the screen that the user is viewing the page on.
Here's an example that sets all the imgs to 40% of the viewport height
img {
height: 40vh;
}
Height with percents it's a little bit tricky because the parent must have height too. You have 2 options: Set the parent's height too. B. Set the height by pixels.
.first {
height: 450px;
}
.first img {
height:50%;
}
.second img {
height:200px;
}
<div class="first">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
<div class="second">
<img src="http://i.stack.imgur.com/33oYG.jpg" />
</div>
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;
}
I have an img object within a div object. I want to set the width of img (or div) and have its height set automatically to whatever is necessary to retain the original ratio of the image.
Suppose I set the width to 200px, which is shorter than the image's natural width. When I do this:
HTML
<div id="container">
<img id="foo" src="foo.png">
</div>
CSS
#foo{
width: 200px;
}
or
#container{
width: 200px;
}
the img has the height set to whatever is necessary to retain the original ratio, but the outer div has the height set to the inner image's natural height, and top and bottom margins are inserted between the inner img and the outer div.
I want the outer div's height to be whatever is necessary to retain the original ratio of img so that the top and bottom margin between div and img would become zero. How can I do that?
Try this code
DEMO
<div class="container">
<img src="demo.jpg" alt="" />
</div>
body{
margin: 0;
}
.container{
width: 200px;
border: 1px solid red; //tmp added to check the height of container
}
.container img{
display: block;
width: 100%;
}
Use this function:
<script type="text/javascript">
function resizeHeight(){
var resizedImage = document.getElementById('foo');
resizedImage.style.height = (resizedImage.style.height * 200)/resizedImage.style.width;
resizedImage.style.width = '200px';
}
</script>
And edit your image line to this:
<img id="foo" src="foo.png" onload="resizeHeight()">
It should set the picture's width to 200 automatically, and resize the height proportionally.