What is the difference between render size (width and height) and display size (style.width and style.height)
Even when I change it to px it is still not same.
These are the examples
https://codepen.io/chartjs/pen/oWLZaR
<canvas id="chart_0" height="40vw" width="80vw"></canvas>
https://codepen.io/chartjs/pen/WjxpmO
<canvas id="chart_0" style="height:40vh; width:80vw">
height="" and width="" are HTML and do not use "view height" or "view width", only fixed sizes.
vh and vw are used in CSS only.
Related
(I am new to html5, and don't know anything about css.)
When adding an image, if i assign width a percentage, it works fine i.e. the image width will be that percentage of the browser window width.
However, assigning height a percentage does not work at all. I can give whatever percentage i want and it will still render the orginal size or according to width (if specified). So, if i type :
<img width="40%" height="60%" src="saitama wall.jpg" >
it would just take width into consideration and adjust height according to original picture instead of taking 60% of window height.
**Why does this happen?**Is it because webpages have bounds only on width not the height (as you can scroll down)?
Yes, a page can scroll, so setting % of height is not the way to do this,
if you are looking to set an image compared to the browser window size, try using vw (view width) and vh (view height) instead of percentage ie
<img src="saitama wall.jpg" style="width:40vw; height:60vh">
more info about css units:
https://www.w3schools.com/cssref/css_units.asp
Handling image dimensions is not recommended using HTML attributes. Using CSS is a better option. So using CSS your IMG tag should be as follows
<img style="width:40vw; height:60vh" src="saitama wall.jpg" >
How can i prevent an image from resizing when i try to change the browser's size? Here's an example of what I am talking about. Try to resize your browser and you'll see the image not changing. It seems simple but I've tried everything I know without success.
Thanks
Try This
CSS
.hero img
{
width:500px; !important /* desired pixel value */
}
hope this helps..
There are many ways you can ensure that the image size doesn't change.
<!DOCTYPE html>
<html>
<style>
img {
width = 100px;//or any size you want but not in '%'
height = auto;//or in px or in em
}
</style>
<body>
<img src="imgsrc" alt='img'>
</body>
</html>
the width can be any size you want but make sure the length unit that use should be an absolute unit. In css following are the absolute units:
cm (centimeters)
mm (millimeters)
in (inches)
px (pixels)
pt (points, 1 point is 72nd part of an inch)
pc (picas, 1picas is 12th part of a point)
You can, if you want use 'em' as essential 1em is means the current font size and you can then sent the current font size in px which is absolute and isn't affected by browser re-size.
Same goes with height but you should set the height to auto as in that case you are preserving the aspect ratio of the original image.
For more information on CSS units of length refer this w3-school reference.
I have an image tag. I tried to set the max height and width property to 600 px. Now if the image size is less than it, it increases the image size. I only want to have the max height and width only if image is more than 600 px.
<img src="8.jpg" style="max-height: 600px;max-width:600px;/">
It works proper, can you make a fiddle with wrong example?
<img src="http://www.waltereul.de/walter-eul-pictures/walter-eul_100x100_10.jpg" style="max-height: 200px;max-width:200px;/">
<img src="http://www.zenimax.com/jpn/fallout3/images/avators/100x100falloutav-vb.gif" style="max-height: 200px;max-width:200px;/">
example
For me it looks like your img-tag is affected by another css-rules which affect the width/height of your images. I would suggest to use the developer tools of your browser to check which css-rules affect your img-tags (Tutorial if needed: https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools).
Also in your code example above, the slash should be outside of your style-attribute, like this:
<img src="8.jpg" style="max-height: 600px;max-width:600px;" />
max-width purpose is to limit a large resolution image into specified size.
so, basically max-width itsef can't force a smaller images to enlarge.
i bet the images are affected by other CSS. as stated:
"The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width." - http://www.w3schools.com/cssref/pr_dim_max-width.asp
please try This one:
One method
<img src="8.jpg" style="max-height: 200px;max-width:200px;/">
another one method like this:
<img src="8.jpg" />
Css Code:
img{
width:100%;
max-width:600px;
}
I'd like to have an image to have either a height of 725 or a width of 500 and maintain it's aspect ratio. When I have images with a height of over 725 and thinner than 500 they get stretched out to fit a width of 500.
What is the best way to do this?
Below is what I am doing now:
<asp:Image Height="725" width="500" ID="img_DocPreview" />
Update:
Changed it to this but have the same problem. If I specify just the height it will maintain the aspect ratio but it exceeds the max width of 500px that i want.
<img style="height:725px;width:500px;" id="img_DocPreview" src="Images/empty.jpg" />
You can try this one
img{
max-height:500px;
max-width:500px;
height:auto;
width:auto;
}
This keeps the aspect ratio of the image and prevents either the two dimensions exceed 500px
You can check this post
editied to add support for ie6:
Try
<img style="height:725px;max-width:500px;width: expression(this.width > 500 ? 500: true);" id="img_DocPreview" src="Images/empty.jpg" />
This should set the height to 725px but prevent the width from exceeding 500px. The width expression works around ie6 and is ignored by other browsers.
If you only specify either the height or the width, but not both, most browsers will honor the aspect ratio.
Because you are working with an ASP.NET server control, you may consider executing logic on the server side prior to rendering to decide which (height or width) attribute you want to specify; that is, if you want a fixed height under one condition or a fixed width under another.
set a style for the image
<asp:Image ID="Image1" runat="server" style="max-height:1000px;max-width:900px;height:auto;width:auto;" />
You could use some CSS and with the idea of kbrimington it should do the trick.
The CSS could be like this.
img {
width: 75px;
height: auto;
}
I got it from here: another post
I was wondering if in the width and height <img> attributes, I could specify width and height as percentages?
Well, I guess that is obvious, because when I try so, it resizes, but it appears to skew the quality of my image.
Here is an example of my markup with fixed attributes:
<img src="#" width="346" height="413">
Now, while trying to scale this down, say by half, via percentages:
<img src="#" width="50%" height="50%">
I get something completely different than:
<img src="#" width="173" height="206.5">
I think I'm just fundamentally mistaking my percentage markup or something because there is a noticeable difference between my second and third example visually.
Note: it is invalid to provide percentages directly as <img> width or height attribute unless you're using HTML 4.01 (see current spec, obsolete spec and this answer for more details). That being said, browsers will often tolerate such behaviour to support backwards-compatibility.
Those percentage widths in your 2nd example are actually applying to the container your <img> is in, and not the image's actual size. Say you have the following markup:
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
Your resulting image will be 500px wide and 300px tall.
jQuery Resize
If you're trying to reduce an image to 50% of its width, you can do it with a snippet of jQuery:
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
Just make sure you take off any height/width = 50% attributes first.
You can set one or the other (just not both) and that should get the result you want.
<img src="#" height="50%">
Here is the difference:
This sets the image to half of its original size.
<img src="#" width="173" height="206.5">
This sets the image to half of its available presentation area.
<img src="#" width="50%" height="50%">
For example, if you put this as the only element on the page, it would attempt to take up 50% of the width of the page, thus making it potentially larger than its original size - not half of its original size as you are expecting.
If it is being presented at larger than original size, the image will appear greatly pixelated.
Try use scale property in css3:
75% of original:
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
50% of original:
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
width="50%" and height="50%" sets the width and height attributes to half of the parent element's width and height if I'm not mistaken. Also setting just width or height should set the width or height to the percentage of the parent element, if you're using percents.
Given the lack of information regarding the original image size, specifying percentages for the width and height would result in highly erratic results. If you are trying to ensure that an image will fit within a specific location on your page then you'll need to use some server side code to manage that rescaling.
From W3Schools
The height in percent of the containing element (like "20%").
So I think they mean the element where the div is in?
There is actually a way to do this with html only. Just sets:
<img src="#" width height="50%">