Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
An
img
with
height: 100%
applies a scroll bar to the web browser.
If there is no
<!DOCTYPE>
tag, there is no scroll bar.
When you insert the
<!DOCTYPE>
tag, a scroll bar is created.
I tried several things, but I think
<!DOCTYPE>
is a problem
I would like to make the scroll bar disappear without using
overflow
.
<style>
margin: 0;
padding: 0;
box-sizing: border-box;
html, body {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
</style>
</head>
<img src="test.jpg">
</body>
</html>
The above source code has no scroll bars, but inserting
<!doctype html>
creates a scroll bar.
I have used the developer tools to make sure the
html
,
body
, and
img
heights are the same.
I want to know why
<!doctype html>
causes scroll bars.
And I want to know how to fix it without using
overflow
in CSS.
I have tried several codes:
Add
display: block
to
<img>
.
By default,
<img>
has
display: inline
as default display style. And
inline
and
inline-block
display style will apply a blank space between elements.
To remove the blank space, you can read these links:
Display: Inline block - What is that space?
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Alternatively, just make its display style to
display: block
.
Before
box-sizing: border-box;
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
img {
width: 100%;
height: 100%;
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Sig07-006.jpg">
