Scale an image only by width or height - html

I have an image:
<img src="#" width="42" >
If I set only the width, Firefox and IE will scale also the height, but Chrome doesn't it keep the initial image height. Can Chrome behavior be fixed ?
If I set just the height is not taken in consideration. Can an image be scaled by height ?

Setting height to auto should work. For example:
<img src="#" width="42" height="auto">
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
This will work for all modern browsers and works for both % and px, em sizes ect.
See W3schools
Or using inline styles:
<img src="#" style="width:42; height:auto;">
Edit: I'm not sure you did not mean give height a value and make width resize automatically. In which case width: auto should do fine.

Instead of letting HTML do the work, let CSS do it.
Change :
<img src="#" width="42" >
To :
<img src="#" style="width: 42px; height: auto;">
That will allow CSS to resize the image.

.img
{
width:auto;
height:auto;
}
You can define width and height in css

Related

Image height and width is overridden by css

<img src="img_forest.jpg" alt="Forest" width="600" height="400">
I have the above line in my html body tag. But the height and width specified here are overridden by the height and width specified for the img in the stylesheet.
Why does this happen?
At this point your getting into more of styling the image element. The width and height attributes initially tell the browser the necessary amount of space it needs to make on-screen for these images when the page loads.
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).
http://www.w3schools.com/TAgs/att_img_width.asp
Try inline style to override your css file or more specified your css selector for images in your html page.
<img src="img_forest.jpg" alt="Forest" style='width:600px !important; height:400px !important;'>
You can see width="600" is an attribute, but width:100px is a property. While rendering these attributes are converted to the respective style and placed at the beginning of the style sheet.
Check the accepted answer Click here. This is what you want.
That's because the width and height attributes set the intrinsic width and height of the image.
By default, width and height CSS properties have the value auto. Since images are replaced elements, this means the intrinsic sizes will be used (§10.3.2 and §10.6.2).
However, you can override that with some declaration, and then of course the image will be displayed with the specified size.
If you don't want this, add important inline styles, which can't be overriden:
<img src="img_forest.jpg" alt="Forest" width="600" height="400"
style="height: auto !important; width: auto !important" />
img {
height: 100px;
width: 500px;
}
<img src="/favicon.ico" alt="Forest" width="16" height="16"
style="height: auto !important; width: auto !important" />

adjust image to fixed content

I'm dealing with img tags which are have a fixed width & height.
The question is that a have a set of images that each one has its own dimensions, so in the resulting view, some of them vary in height keeping the width constant.
This is what I get:
... and this is what I want to accomplish:
Is there any way that whatever image is loaded in the img tag keep proportions and be all with the same height?
you can use css and set the property of width and height to what ever you want
img
{
width : 150px;
height : 150px;
}
<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />
Please try the following:
1. Put the images into 'div's
Eg.
<div class='image-container'>
<img src="yourimage.jpg">
</div>
adjust the height of the in the stylesheet:
.image-container img{
width:100%;
height:100%;
}
adjust the width of the 'div's to fill quarter of the page:
.image-container{
width: 25%;
}

Image Set Width Height Attributes in HTML, Set Width 100% in CSS

I have an image whose size I know.
<img class="example" src="img.jpg" width="1024" height="768" />
I want to have the width and height attributes set so it can layout where the image will be before it's downloaded. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.
However, I also want the image to have width: 100%. Is there a way to achieve this using CSS?
I tried
.example {
width: 100%;
height: auto;
}
However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have width: 100% (i.e. the width of the parent)?
I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.
Edit
Really, I'm just seeing if there's a better way of doing it than this,
https://jsfiddle.net/s6gkonbh/
[Update: updated link to fix broken external image url]
JSFiddle Demo
<div style="width:356px; height:452px; background-color:yellow">
<img class="example" src="https://live.staticflickr.com/1427/1370476027_aaf0621679.jpg" width="100%" />
</div>
just provide the width and height to the parent container division which will occupy the space of the image's dimensions while the image will load.
and set the width of the image to 100% and it will take height according to aspect ratio. Just set the background color of your parent div to white or something to blend with the background.
JSFiddle Demo
HTML:
<div style="width:500px; height:300px; background-color:yellow">
<img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>
NB: image copyrights are with their respective owners.
Hi please try this remove the height and width from img tag
<img class="example" src="img.jpg" />
and css
.example {
width: 100% !important;
height: 100% !important;
}
The only way is by using javascript. Just set width 100% in css, then with javascript get the imatge width an multiply by the aspect ratio to get the desired height.

What do the width and height attributes do when using srcset and sizes?

If we're using the srcset and sizes attributes, it is still useful to specify a src attribute as a fallback. Similarly, I imagine that older browsers would also take advantage of width and height attributes if they were specified. But do modern browsers?
For example:
<img
src="foo100x100.jpg"
srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w"
sizes="100vw"
width="100"
height="100"
alt="example"
>
Are the width and height attributes of any use to a modern browser in this example?
Based on experimentation, it behaves as if you had specified width and height CSS properties in pixels. However, it can be overridden by your own CSS.
img {
width: 200px;
/* height will be 100px because of the HTML attribute */
}
<img
src="http://placehold.it/100x100"
srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w"
sizes="100vw"
alt=""
width="100"
height="100"
>
This is a bit disappointing, as I was hoping that modern browsers would use width and height HTML attributes to determine what the aspect ratio of the image was before downloading the image, so as to avoid the layout of following content jumping around as the page loads.

Img set to max-width: 100% is publishing larger than the actual image size?

This is driving me bonkers. In my CSS is this code
img {max-width:100%; height:auto; }
But when I upload an image to the blog post that is 200x200
<img width="200" title="photo-Trent-Dysmid.jpg" style="width: 200px; float: right;" alt="photo-Trent-Dysmid.jpg" src="http://inboundmarketing.digitalhive.buzz/hubfs/jan-2016-images/photo-Trent-Dysmid.jpg" data-constrained="true">
And then preview the blog post, it is publishing it at 798x798, basically to the full width of the blog page. The only way I can get it to display at the right size is by manually changing "width: 200px" to "max-width: 200px" but what a drag to have to do that every time! What am I doing wrong?
Thanks!
Rebekah
max-width: 100%
The percentage value will refere to the width of the container the img-element is in, and not the picture itself!
Example:
<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>
So if the container has a width of 500px, the img-element will have a max-width of 500px as well
You could set a custom max-width fitting the image using JavaScript and the image.onload event:
<img onload="this.style.maxWidth = this.width + 'px'" src="..." />