Is there a way with HTML that I can auto re-size a picture without having to look at the resolution of the picture and changing the height and width manually?
Here is what I have so far,
<img src = "jack bauers.jpg" width ="562" height ="358"/>
<img src="smth" width=123></img>
Then browser'll calculate the height automatically.
<img src="smth" height=123></img>
Then width will be chosen automatically.
<img src="smth" height="45%"></img>
and
<img src="smth" width="45%"></img>
Can be explained using the browser's smartness too :)
I am assuming you want resize accoding too outer <div> the do
<img src="" style="max-height:100%;max-width:100%"></img>
dont use width height
Fiddle
Related
Write the HTML code for the webpage titled "Internet", that has two paragraphs and an image the width of which is 230 pixels and height of 180 pixels.
Try with HTML tag height and width
<img src="imagefile.jpg" alt="Image" height="180" width="230">
You can also use the style tag. For example, you'd have the following code in your text:
<img src="imgfile.jpg" alt="Image" style="width:180px;height:230px;">
The style tag ensures the image stays that size and overrides any further image size commands
More details :- https://www.wikihow.com/Set-Image-Width-and-Height-Using-HTML
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;
}
When my pictures with equal height, but when make img width: 100%;,things went wrong.the picture can't equal height.
I don't think this is an easy question to me.
I don't understand why picture with same height, can't render by browser equal height.
here is jsfindle.
the effect with no pictures
But when I put pictures to img:src, things got bad.
After all, I want it make equal view though different device,not only pc.But,...
I puzzled, what's the point to this question?
In the example you set the height of the FRAME to 35 and that doesn't change from one div to the next. The height is not set for the image in the CSS, but the MAX-HEIGHT is, so the height can be changed, but will not go over the max-height. Same with the width, it is not set.
When you change the height in the html tag, html keeps the restraints of the image size. If you remove 20 percent of the height, it will automatically remove 20 percent of the width unless you tell it not to by setting the width you want.
Try this:
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" height="250" width="250" />
</div>
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" height="25" width="250" />
</div>
The height will change, but the width will not. But of course the width has it's MAX-WIDTH set to 160px so even though this html code says 250, it still wont go over 160.
I think this is what you were asking, if not, then I apologize.
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%">
Is it possible to downsize an image in html while keeping proportions?
I know I can use height and width attribute of img tag, but I don't know the image size.
Please don't tell me to find out the image size on the server, or that the right way to do this is to generate thumbnails on the server side and that is saves bandwidth and improves page loading time.
I know what the ideal solution is. But I want quick and dirty...
Quick and dirty: just set one of the attributes in img tag:
<img src="my.jpg" width="200" /> or <img src="my.jpg" height="200" />
Yes. Just use height or width.
But quick and dirty is very dirty.
Remember also that you can give a percentage of the original width / height as value as well, for instance:
<img src="my.jpg" width="50%" />