Image height and width is overridden by css - html

<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" />

Related

How to contain a image responsively on an amp page?

As we need to define an image with amp-img tag for an amp page, the problem is with the responsive nature of those image.
For example:
<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>
Now if the master div is 600px then, the image will get stretched out to 600px (more than its normal 100%), but for a mobile device with master div being 300px , the image will adjust the height and will be perfectly fine as it will get contained in the 300px div stretching it to 100% won't make effect.
Also, layout cannot be set to fixed because it will then stretch out of the mobile display.
What's the solution?
If you have dynamic width of the image and want to handle this situation than go to this link : https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ and read "Fixed-Height Layout with correct Aspect Ratios" section.
It will help you to implement amp-img when you do not know the image width and do not want the image to be get stretched.
You can do like this :
CSS
<style amp-custom>
.magic-img { max-width:400px; margin: 0 auto;}
</style>
HTML
<div class="magic-img">
<amp-img width="400" height="200" layout="responsive" src="https://xyx.com/abc.png"/>
</div>

Scale an image only by width or height

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

Stopping image to resize and hiding bottom scrollbar

How can you stop image being resized by the browser? I want image to have certain width so I'm using <img src='src' style='width: certain_widthpx' />.
However when you resize the browser width, the scrollbar in the bottom appears which I don't want. How can I stop that?
You need to provide a simplified version of your DOM in the question. Assuming parent of img is body
Add this css rule to the parent.
body{
overflow-x: hidden;
}
You should specify image minimum width and height:
<img src="http://via.placeholder.com/800x800" style="min-width: 800px; min-height: 800px;" width="800" height="800" />
As you asked you want your image not to be resized by the browser, browsers resize contents within a window based on the view-port. Every time you'll try to resize your browser, view-port will change, so to maintain the user's viewing experience content gets resized. Now as you showed <img src='src' style='width: certain_widthpx' />, here you're trying to give your image a fixed width that means you're restricting the view-port to hold the image at this fixed width and hence at view-ports lesser than your image's width, horizontal scrollbars appear. If you really want your image to be of that fixed width then you should contain it within an another holder and give an overflow-x to be scroll/auto.
Like this:
<div style="overflow-x: auto;'>
<img src='src' style='width: certain_widthpx' />
</div>
OR there is one more way and that is CSS way
<div class="holder">
<img src='src' />
</div>
CSS:
.holder { overflow-x: auto; }
.holder img { width: certain_widthpx; }
In above solution your image will hold that fixed width but the holder will adjust itself as per the view-port and the point where your image's width will be greater than the view-port holder will start showing horizontal scrollbars, but the browser window will not.

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.