How to make vertical and horizontal center without stretching image with css?

Question

If I set width and height using css (width:100%; height:100%), image will be stretched, and It looks ugly. How to Fill images without stretching? What is more, how to make vertical and horizontal center?

You need image as background or as html tag ? – Grégory C Nov 11 '20 at 13:58 — Grégory C, Nov 11 '20 at 13:58

score 2 · Accepted Answer · edited Nov 11 '20 at 14:46

2

Using only HTML and CSS:

HTML

<div class="fill"></div>

CSS

.fill {
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

edited Nov 11 '20 at 14:46

Conda

141
1
2
12

answered Nov 11 '20 at 13:40

score 1 · Answer 2 · answered Nov 11 '20 at 13:42

Use

Credits to the owner of the image image source: https://i.stack.imgur.com/Ee9ql.jpg

* {
  margin: 0;
}

.bg {
  width: 100%;
  height: 100vh;
}

.bg img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}

<body>
  <div class="bg"><img src="https://i.imgur.com/PLZJasi.jpg"></div>

How to make vertical and horizontal center without stretching image with css?

2 Answers2