This question already has answers here:
Avoid an image to go outside a div?
(7 answers)
How do I stop an image displaying outside of the div
(6 answers)
Closed 8 months ago.
I have an issue with my images (svg, jpg,...., all formats). For instance if I want to make a header and set in CSS the header height for instance like this:
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
height: 300px;
display: flex;
align-items: center;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/400/09f/fff.png" alt="" />
</div>
<nav>
</nav>
</header>
</div>
The image extends over the borders. How can I tackle that issue?
If the image needs to nested within div that themselves are nested within the constricting parent, you'll need to specify the size on those also.
.container{
height: 300px;
width: 1000px;
margin: 0 auto;
border: 3px solid red;
}
.container header, .container div{
height: 100%;
}
img{
height: 100%;
width: auto;
}
<div class="container">
<header>
<div>
<img src="https://via.placeholder.com/500" alt="">
</div>
</header>
</div>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
For some reason a white line between the header and a section is visible that I have no idea why it is there, I double-checked and it's part of the content and not the padding, and I have no idea how to remove it that the header won't have that line between itself and the section below it, can someone have a look to see if there is something I missed in code?
header {
position: relative;
}
.headImage {
width: 100%;
height: 100%;
}
<header>
<img class="headImage" src="../images/Corson.with.wings.png" alt="Head Image">
</header>
I have added 3 solutions to fix the issue its because the default vertical-align value of the image is baseline; and img is considered as inline element
body {
background: url(https://placeimg.com/640/480/nature);
background-size: cover;
}
.header {
position: relative;
width: 100px;
margin: 10px;
background: red;
float:left;
}
.headImage {
width: 100%;
height: 100%;
}
.header.block img {
display: block; /* this will set image as a block */
}
.header.v-align img {
vertical-align: middle; /* this will align the inline element in the middle */
}
.header.f-left img {
float:left; /* in this case you will need to clear floats */
}
<div class="header">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header block">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header v-align">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header f-left">
<img src="https://placeimg.com/100/100/any" />
</div>
This question already has answers here:
Is it possible to center an inline-block element and if so, how?
(5 answers)
How can I horizontally center an element?
(133 answers)
Closed 3 years ago.
Currently, my webpage just consists of four images; two side-by-side. At the moment, they're all four off to the left side of the page and I would like to center them to the middle. I am currently using margin-top for its distance from the top of the page, so I am also using margin-left, right, etc. My elements stay in place when resizing my browser(which is what I wanted), but I can't move them to the center no matter how many times I change the left and right pixels.
body {
padding: 0px;
margin: 0px;
}
#dLand {
display: inline-block;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#sunset {
display: inline-block;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#griff {
display: inline-block;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#samo {
display: inline-block;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
<div id='container'>
<img id='dLand' src='img/calidisney.jpeg' alt='Disneyland, CA' style='width: 40%'>
<img id='sunset' src='img/sunset.jpg' alt='Sunset Strip' style='width: 40%'>
<img id='griff' src='img/griffith.jpg' alt='Griffith Observatory' style='width: 40%'>
<img id='samo' src='img/samopier.jpg' alt='Santa Monica Pier' style='width: 40%'>
</div>
Try this one but if you want to display all images inline in mobile view use #media queries to archive that.
div#container {
margin-top: 200px;
width:100%;
text-align:center;
}
div.pic{
display:inline-block;
}
<div id="container">
<div class="pic"><img id='dLand' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='sunset' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='griff' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
<div class="pic"><img id='samo' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
</div>
see this in full-page.
There are different ways to center things, one technique is to set #container top and left to 50%, then transform: translate(-50%,-50%)
You may use flex to center and wrap them:
html {
min-height: 100%;
display: flex;
}
body {
/* or any wrapper within a flex or not parent*/
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
img {
width: 50%;
}
<img src="http://dummyimage.com/200x100/a0f">
<img src="http://dummyimage.com/200x100/bad">
<img src="http://dummyimage.com/200x100/def">
<img src="http://dummyimage.com/200x100/f00">
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 3 years ago.
I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.
I want these two images to be a link for two different pages.
I have tried different things but neither of them worked.
HTML:
<body>
<div class="header">
<div class="logo">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
Use flexbox and set margin:0 and padding:0.
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
This question already has answers here:
CSS - center two images in css side by side
(5 answers)
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 4 years ago.
I am fairly new to html and css, and I was trying to make two images go side by side in the center of the screen (automatically adjusting themselves when the screen is scaled).
I have only been able to get the two images to go next to each other and not been able to center them or make them automatically scale.
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The two images should go next to each other in the centre of the screen, scaling themselves on different sized browser windows and when browser is zoomed in or out. I should be able to change the size of the images to what I need.
Here is a way to do it with flexbox
JSFiddle demo here
* {
height: 100%;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.images {
display: flex;
justify-content: center;
align-items: center;
margin: auto 0;
padding: 0 200px;
}
#media screen and (max-width: 768px) {
.images {
flex-direction: column;
padding: 0;
}
}
<div class="images">
<img src="https://placekitten.com/600/400">
<img src="https://placekitten.com/600/400">
</div>
Add the following css-
body
{
text-align:center;
}
.row
{
display:inline-block;
}
I hope this will help you.
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.ul_class {
width: 100%;
display:block;
text-align: center;
}
.li_class {
width: 33.33%;
display:inline-block;
margin-right: -4px;
}
</style>
</head>
<body>
<ul class="ul_class">
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
<li class="li_class"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpVNXBVaIl8ne-AYJfYxls2Js2dcYJohl5e-d3ompbZxrjtzlk" alt="Snow" style="width:100%"></li>
</ul>
</body>
</html>
Use below code in your css.
OR
You can use flex. check below link.
https://www.w3schools.com/cssref/css3_pr_justify-content.asp
.row{ width:80%; margin:0 auto; }
try using flex on the row element
.row {
display: flex;
justify-content: center;
align-items: center;
}
This question already has answers here:
How to get rid of extra space below svg in div element
(9 answers)
Closed 4 years ago.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
see the demo above.
when scroll to the bottom, there is a red gutter which is the background of wrapper in case 1 and case 2 works fine.
Does anyone knows why and how to fix it?
The SVG is an image, so it behaves like any <image> and sits on the text baseline. So the space you are seeing is the space left below the text baseline for descenders etc.
To fix, just make the SVG display: block.
The second version works fine because <div>s are already display: block.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
display: block;
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
seems duplicate with this question
add display: block; to the svg element could solve the problem