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

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.

Related

How to get rid of default margin around image inside a div?

I am building a few websites and always have this same problem with css.
I have two images inside a div container.
When i put for example a text inside a div the div takes the heigth of the text but when i put an image in for some for me unknown reason the div suddenly seems to have a default heigth.
As you can see i have made the size of the images responsive in my css. I ve involved a color on the div just to give a clearer look on what happens.
When i narrow my browser screen the heigth of the div stays equal ( thus not being responsive) and for some reason the images are pushed down inside the div.
How can i solve this.I want the div container height to be responsive as the images inside are and holding the same height as the images and as i narrow the browser screen.
Last but not least ... what is it that i do not understand ?
Thank you for helping me out.
My code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>
If you want the parent div to have a certain size, you should enforce dimension on the div and inherit its properties to its children...
div{
height: 50vh;
width: 50vw;
background: red;
}
div>img{
height: 100%;
width: 100%;
}
<div>
<img src="image.jpg" alt="text">
</div>
you should try adding display: block; to <img> tag.
I hope this help.
If you aren't using Bootstrap or another css framework, maybe you need to add reset.css file to your project. Example of reset: https://meyerweb.com/eric/tools/css/reset/
Please check this. I think it will help you. codepen
div{background-color:red;width:200px;overflow:hidden;}
div img{height:auto; max-width:100%;display:block;}
<div>
<img src="image" alt="text">
</div>
Try using max-width:100% on the image. This will keep it's size limited to it's parent size.

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>

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

How can I ensure that my images look clear on my website

I'm currently working on my portfolio and I'm at the stage of adding images from my computer. However, when I upload an image it only looks clear if I don't change the width/height in my html. Whereas when I do change the width/height it becomes stretched and unclear.
This is an example of the image that has had its width/height changed -
Here is the image when I dont change the width/height -
The current image i'm using is a jpeg and the dimensions are 1920 × 1044
I'm resizing the image using this method -
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />
Take a look at my codepen to see more. I'm using placeholder images here for the time being. Ideally I would like my own photos to be as clear as the photos on my codepen. -http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100
Your resizing is not proportionate. If you do something like style="width:50%;", the the image will display proportionally but at the specified size percentage.
You need to resize it and also keep the aspect ratio of the original image to avoid stretching it.
For example:
<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />
CSS:
.aspect{
height: 300px; //However tall you want it to be
width: auto; //Don't specify the pixels
}
This will also work:
.aspect{
height: 300px; //However tall you want it to be
width: 100%; //Don't specify the pixels
}
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />
auto correct height to the width
`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />`
auto correct width to the height