Image and their size in HTML - html

Suppose we have the code
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
When we are inserting images using HTML, do we need to include the dimensions, width and height. If we don't need to, does it automatically set a default size for the image.

The default size for images in HTML is the actual size of the files on the filesystem. If you want to set the height and width of an image, here is how I would do it (adapting your code):
<!DOCTYPE html>
<html>
<head>
<style>
#imageId {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" id='imageId'>
</body>
</html>
And set the size dimensions (height, width) to whatever you want

Related

When displaying a Jpeg, the browser is displaying it about twice the size it should be

Browser: Chrome (displaying at 100%)
Desktop Monitor: 4K
When displaying a Jpeg, the browser is displaying it about twice the size it should be. Just like it's been zoomed in. Below is the HTML code and Style Sheet:
<!DOCTYPE html>
<html>
<head>
<title>
Testing
</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<img src="images/Home.jpg" width="3840" height="2560">
</body>
</html>
body{
margin: 0;
}
Try it
<!DOCTYPE html>
<html>
<head>
<title>
Testing
</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style>
.body_img{
width: 100%;
}
</style>
</head>
<body>
<img src="images/Home.jpg" class="body_img">
</body>
</html>
The width and height attributes specifies the width and height of an image, in pixels.
See https://www.w3schools.com/tags/att_img_width.asp
If sizes are not set browser shows the image by DPI if is set in image.
The size attributes can set in other units ie. pt, mm, cm, in, and % (percent). 100% is a good choice maybe.
What is the real size of your image in pixels and what DPI is set in image?
If the image has 300 DPI set, then it shows as downsized, when size attributes are not set.

embed pdf in html height doesn't streach

I am trying to embed pdf in my html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetPDF</title>
</head>
<body>
<object data="/Content/Exams/2016/T205_16.pdf" type="application/pdf" width="100%" height="100%"></object>
</body>
</html>
but when I run this I'm getting width of 100% (good), but the height is only like 100px and not 100% as expected.
By default HTML block elements (including the <html> and <body> elements) are only as high as their content. That is, they 'shrink' to fit the height of their content. The PDF object has its height property set to 100%, but since this is 100% of its parent, not the viewport, and the PDF's parent is shrinking to fit content, the PDF object will display at its minimum height.
You need to set the PDF object's parent (the <body> elements) to be the height of the viewport. This is done easily with CSS - simply set the <html> element's height CSS property to 100% to make it fill the viewport, and then also set the <body> element's height to 100% to fill the <html> element.
Add this code to your <head>:
<style>
html, body {
height: 100%;
}
</style>

html/css can't change image height with percentage

So I've got a simple little domain up with a fileserver.
I want the main page just to be an image.
I also want that image to take up half of the browser window's height, so I write up a bit of html with in-line styling. Yes, I am a beginner at this stuff, so all I know for now is basic html and css.
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">
I try it out and the image happily displays at full resolution, completely ignoring my styling, so I play with it a little and I eventually find out that something like
<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">
and
<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">
work just fine, but the reason I use a percentage is because I want the size to scale according to the browser window size.
So I'm trying to figure out what I'm doing wrong here, or if there's some bug or I'm just being an idiot and the fix is painfully obvious.
The img has to have an absolute position! Otherwise a max-height doesn’t do anything.
Furthermore the value "auto" isn’t allowed.
<style>
img {
position: absolute;
max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>
or
<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>
First of all, you should use CSS in a linked file and not inline, like you do right now. This makes managing changes incredibly easier. Take a look at this minimal example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
The style.css file would contain all your styles, like:
img {
max-width: auto;
max-height: 500px;
}
An alternative for small pages is writing the CSS within the <style> tags, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
img {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Even better, use classes:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.image {
max-width: auto;
max-height: 500px;
}
</style>
</head>
<body>
<img class="image" src="fruit.png" alt="a bowl of fruit">
</body>
</html>
Regarding your question, I assume what you want is dynamically fill the half of the browser window with an image. This is possible with a rather new unit called viewport height (vh). Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.half-viewport {
height: 50vh;
width: auto;
}
</style>
</head>
<body>
<img class="half-viewport" src="http://lorempixel.com/1280/800/" alt="image">
</body>
</html>

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

fix a div/button/link to a background image

I am having an annoying issue to position an element on top of a background image. Say we have a html as :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="background:url('image.png'); background-size:cover;">
<button>Button </button>
</div>
</body>
</html>
The button should be placed at left: 50px; top: 100px; against the original image, but because the device screen ( desktop chrome or ios safari ) change, and the background-size: cover; property, the image is actually scaled, so the button would not appear at the right position.
I tried another way :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="width:100%;">
<img src="image.png" width="100%" />
<button style="top: -100;z-index: 5;">Button </button>
</div>
</body>
</html>
This way the page may scroll because the image might beyond screen height, once i positioned the button to the right place, and changed to another device resolution, the position was altered again.
I also tried javascript to listen to resize event to absolutely position the button, it still has obvious difference between desktop and ios screens.
How can i make it ? Thanks in advance!
Edit:
If the image is scaled due to screen resolution, i want the button be scaled same ratio too. It would be great to find a way without complex javascript.
If you want the button size change with the scale of the page, so you must add width and height style for that in% unit. Because pixel is a fix unit on different devices but % depends on device resolution. And finally you can add min-width and min-height or max-width and max-height to your div style to have a good control on other devices. Good luck.
Add CSS position absolute to your image and button elements. In this way you will be able to set their position accordingly to their parent element <div>.
http://jsbin.com/mevuxizuzu/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
</div>
</body>
</html>
You can use the position:absolute; for your button and set the right place with top and left position with %, because your width and height are based on % not pixels .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
</div>
</body>
</html>
Try the following code that use relative position for the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
left: 20px;
top:100px;
}
.bd{
background-image: url('http://lorempixel.com/650/1000/sports/1/');
background-size: cover;
height: 1000px;
width: 650px;
}
</style>
</head>
<body>
<div class="bd" style="width:100%;">
<img style="position:absolute" src="" width="100%" />
<button>Button </button>
</div>
</body>
</html>
Checkout this DEMO: http://jsbin.com/pemafigafa/3/