Where is my fault - html

<!doctype html>
<html>
<head>
<title>Satya</title>
<meta charset="utf-8"/>
</head>
<body margin="0">
<div class="topheader">
<div class="banner">
<img src="../img/header2.png" alt="header banner" width="100%" height="15%"/>
</div>
</div>
</body>
</html>
Where is my fault that i am not getting the banner at 15% of the page. I also have tried an external style sheet but that's also not working. if i remove doctype declaration from code than its absolutely working.
help me getting it right.
`

<img src="../img/header2.png" alt="header banner" style="width: 100%, height: 15%" />
width and height attributes support only pixel size, not percentage

You can either change your html to this
<img src="../img/header2.png" alt="header banner" width="100%" style="height: 15vh"/>
Or if you want to use % units, add this CSS in a separate stylesheet.
body, html, .banner, .topheader {
height: 100%;
}
vh units, in the first example, set the heigh to 15% of the screen height. Using 15% as a unit, will set it to 15% of the parent container, but your image parent does not have a fixed height, so CSS does not know how to compute this. By giving the parents of the element a fixed height this allows the image to take a percentage height.
If it were me, I would just use a separate stylesheet and add this:
.topheader img {
height: 15vh;
}
fiddle: https://jsfiddle.net/9Lcn0wf4/

Related

Display an external web page in a width of 100px and height of 400px area

I wanted to display an external web page with a width of 100px and a height of 400px area. This is the code I wrote.
<html>
<head>
<body>
<a href="http://www.example.com/exmo_frame.html" width="100" height="400">
www.example.com/exmo_frame.html
</a>
</body>
</head>
</html>
But I couldn't get the height and width as I wish. Can You help me to get the correct output?
You will need to use iframe, you can try the following:
<iframe id="myframe" src="http://www.example.com/exmo_frame.html" style="height: 100px; width: 400px;" title="Example website"></iframe>

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.

Center arbitrary image horizontally

Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>

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.

I am trying to centre a banner

I am very new to HTML and CSS.
I am trying to centre a banner at the top of the screen.
I have tried setting the margin left and right to auto, however when I try that, or text-align: center, nothing happens and I'm not sure why...
I placed the banner within a div.
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://www.fablevision.com/northstar/make/objects/banner3.gif" width="553" height="172">
</a>
</div>
And referenced its class like so.
.bruceBanner {
margin-left: auto;
margin-right: auto;
}
The full html is below, in case of any mistakes I am unaware of.
<DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>XYZ Products</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
</body>
</html>
.bruceBanner is a div element.
div elements by default are block-level elements, meaning they take up 100% width.
You need to set a width smaller than 100% or change it's display to an inline-block.
.bruceBanner {
margin: 0 auto;
width: 50%;
}
You forgot a .:
.bruceBanner {
^---
. in CSS is for a class. without the dot, you're trying to style an unknown/illegal html tag <bruceBanner>
From w3schools.com
.bruceBanner {
margin: auto;
}