White borders around
Question
I tried so many times to fit my 5 pictures to my whole page. I don't want any borders (white,black,nothing...) on the sides...
//////////////////////////////////////////// ////////////////////////////////////////////
There is my code:
<html lang="en">
<head>
<style>
body, html {
width: 100%;
height: 100%;
}
.column {
width: 100%;
height: 100%;
margin: 0px 0px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 20px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 384px;
height: 1080px;
}
.column div:first-child {
margin-left: 0;
}
figure {
width: 384px;
height: 1080px;
background: #fff;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
</style>
</head>
<body>
<div class="hover column">
<div>
<figure><img src="https://i.imgur.com/bCIMApU.jpg" /></figure>
</div>
<div>
<figure><img src="https://i.imgur.com/bCIMApU.jpg" /></figure>
</div>
<div>
<figure><img src="https://i.imgur.com/bCIMApU.jpg" /></figure>
</div>
<div>
<figure><img src="https://i.imgur.com/bCIMApU.jpg" /></figure>
</div>
<div>
<figure><img src="https://i.imgur.com/bCIMApU.jpg" /></figure>
</div>
</div>
</body>
And, is it possible to put a logo in the center of the page? Thanks in advance !
#html #css #web
1 answers
solution1
0 2021-11-12 01:17:01
May you add more information to your question(s)? If I understand correctly, you want to remove the whitespace in between images and around them. You should add a Meyers reset to remove any pre-styling the browser applies.
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
This should remove the whitespace issue you're experiencing. If you're trying to cover the entire web page with this image, the best route may be to add it as a background image.
.div1 { height: 1080px; background: url("https://i.imgur.com/bCIMApU.jpg") no-repeat; background-size: cover; }
<div class="div1"> </div> <div class="div1"> </div> <div class="div1"> </div> <div class="div1"> </div>As for the logo, do you want it to be in the center at all times? (During scroll, etc.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.