This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am trying to display a rectangular image in html/css but the image area is being displayed as a square. Meaning that the image displays properly but there is a blank space above and below the image.
I've tried setting image height and width on the image attribute in html but still no luck.
<img src="images/countries/071-serbia.png" style="width:360px;height:240px;">
and css
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
What am I doing wrong? Image size should be width 360 height 240.
That is because you have not done a CSS reset.
Try:
* {
padding: 0;
margin: 0;
}
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
<img src="http://lorempixel.com/360/240/" style="width:360px;height:240px;">
Try writing the attached code it will surely work and if it doesn't let me know in the comments I will try my best to help you.
I have a suggestion for you that instead of px and %, Use Viewport Units like vw for width and vh for height because it will help you make your webpage responsive.
img{
display: block;
max-width: 26.354vw;
max-height: 36.529vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="Images\sample1.jpg">
</body>
</html>
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 1 year ago.
I have youtube embed
<iframe id="you" style="max-width:100%;" width="672" height="378"
src="https://www.youtube.com/embed/rMCILWXXXXX">
I set max-width:100%; for mobile phone.
When screen size is under 672, iframe is made to be smaller.
However height doesn't , even I set height="auto" it doesn't keep proportional.
How can I do this??
I can not do this with only css??
I need to use jquery or something to keep ratio?
You can use the property aspect-ratio
iframe{
aspect-ratio: 16 / 9;
}
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
I usually add a wrapper around the iframe and set the height and width of the wrapper to 100%. Then you can give the iframe a max-width and max-height of 100%.
I also removed margin from the body and border from the iframe to make to prevent a scrollbar from appearing.
html, body {
height: 100%;
margin: 0;
}
div.wrapper {
width: 100%;
height: 100%;
}
iframe#you {
max-width: 100%;
max-height: 100%;
border: unset;
}
<div class="wrapper">
<iframe id="you" width="672" height="400" src="https://www.youtube.com/embed/rMCILWXXXXX"></iframe>
</div>
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I want to have my image always have a fixed aspect ratio (1:1 in my use case, but an ideal solution would work for any aspect ratio) such that the image always takes 100% of the parent's width (which is not static), and the height is calculated based on the given aspect ratio.
I am aware of the CSS trick of using a <div> with styles width: 100%; padding-top: 100%; and then setting the image as the div's background via a CSS url, however I would like to do this with the built-in image tag. My reason is that I am using the onload and onerror properties of the <img> tag, and these would be lost using the div trick.
I have tried the following things:
Attempting to use the same div trick, except applying the width: 100%; padding-top: 100% to the <img> tag. This does not work.
Retrieve the width value of the parent, then setting the height value of the image using JavaScript. This works, but a CSS solution would be much nicer.
This can be done using the following HTML/CSS, thanks to the commenters.
HTML:
<div class="wrapper">
<img class="image" src="img.png" />
</div>
CSS:
.wrapper {
position: relative;
width: 100%;
padding: 100%; /* change this based on your desired ratio */
}
.image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a white border around my entire website right now that I am trying to get rid of. I looked it up online and found several sources that all say to set margin: 0; but when I did this, it is not removing the white border. I suspect it has something to do with using view width and view height instead of pixels or percentages, so how can I remove the white border without changing the width and height from using the viewport size?
.container {
width: 100vw;
height: 100vh;
background: purple;
margin: 0;
}
<div class="container">
</div>
you have to set the margin: 0 property on body not on the div container, hope it helped
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: purple;
}
<div class="container">
</div>
* {margin: 0; padding: 0}
I recommend checking basic universal css boilerplate
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Child with max-height: 100% overflows parent
(11 answers)
Closed 4 years ago.
Okay, so I have read through probably every answer to this and similar questions on this site and multiple others, but nothing seems to be working. I have a basic web page that has a map on it. I have been tasked with making the map full screen within the browser window, NOT full screen on the computer screen. Below is the snippet of code I am working with. I have my width set to 100% and that's working fine. I tried having my height set to 100% as well, but the map disappears off the page when that happens. I also tried setting the height to auto, but that gives me the same result as height 100%. Any suggestions on how this can be fixed?
<style>
#map {
width: 100%;
min-height: 100%;
</style>
Try to put this style to the container div, not the map itself.
<div class="container">
map here
</div>
<style>
.container {
width: 100%;
min-height: 100%;
</style>
You should try define height value for map tag. For exaple:
Your map code in iframe tags, you should define height value for iframe tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: red;
}
</style>
</head>
<body>
<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>
For making a container consume the entire screen, I prefer using
.container {
height: 100vh;
}
height: 100% means element take all height of its parent container. Generally, you should use:
body, html {
height: 100%;
}
.container {
height: 100%;
}
This question already has answers here:
Fullscreen responsive background image in CSS
(5 answers)
Closed 7 years ago.
I want to make an image to use it for a simple slider that takes the whole first part of the browser without scrolling .
Here is my simple code:
HTML:
<div class="img-header">
<img src="img/head.jpg" />
</div>
CSS:
.img-header img {
width: 100%;
height: 100%;
}
I hope my question was clear.
The best way to do it, avoiding the image to stretch strangely, but to always have it 100% the Viewport is to use your image as a background-image set to cover
html, body{margin:0; height:100%;}
.img-header{
height:100vh;
background:url(http://i.stack.imgur.com/xkgPx.jpg) 50% / cover
}
<div class="img-header"></div>
jsBin playground
You need to also define the height for body, html and the parent div. Like the following:
.img-header img {
width: 100%;
height: 100%;
}
.img-header {
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
<div class="img-header">
<img src="https://placehold.it/500x300" />
</div>