0

How to make a normal image (be it 'img' or 'svg') behave exactly like a 'background-image' ? I mean, covering the whole screen and getting cropped to never display borders ?

Only 'css', no 'js'.

I tried this, mostly from img behaving like a background img?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("./demo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
}

</style>

</head>

<body>
<div class="bg">
<img src="./demo.jpg" style="position:fixed; z-index:-5000; top: 50%; left: 50%; margin-left: -960px; margin-top: -540px" >

</div>

</body>

</html>

The "demo.jpg" image is 1920x1080.

It works somewhat, but the top picture doesn't get "squeezed" if the window gets too narrow.

So I tried the proposed approach below :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("./demo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
}

img {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<img src="./demo.jpg">

</div>

</body>

</html>

Which looks like it is working.

The main purpose is to add a clickable map area to the background image. But since it is a "background image", nothing can be clicked.

The map works at that point, goal reached.

Yet I tried the 'img' approach with a 'svg' instead, but the 'a href' just doesn't work like expected :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("./demo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
}

img {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<img src="./demo.svg">

</div>

</body>

</html>

If I copy the 'svg' directly, it then refuses to get "cropped", it is always "contain" :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("./demo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; 
}

svg {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

</style>

</head>

<body>
<div class="bg">
<svg viewBox="0 0 1920 1080" >
<a href="https://www.google.fr/">
<rect x="351" y="797" fill="#777" opacity="100%" width="92" height="42">

</rect>

</a>

</svg>

</div>

</body>

</html>

Any idea ?

Kochise
  • 504
  • 5
  • 10
  • @Djave pretty much dope there, good material, thank alot. Still haven't found the right solution though. – Kochise Feb 02 '22 at 14:46

1 Answers1

1

use object-fit:cover

img {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
<img src="https://picsum.photos/id/1069/1000/1000">
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Good one, pretty much what I was looking for. Yet two problems : 1- if I link to a 'svg' instead of a 'jpg', the link inside is not clickable. 2- if I put a 'svg' directly, its resizing doesn't behave like expected. – Kochise Feb 02 '22 at 14:47
  • @Kochise what do you mean the link inside is not clickable? None of your examples have links, and you can't have a link inside an image. – Djave Feb 02 '22 at 17:20
  • @Djave Yeah, this is very basic, I tried to use a 'svg' which is present in the last example but also as 'demo.svg' in the previous one. – Kochise Feb 02 '22 at 18:31
  • @Djave Finally nailed it https://www.wenuam.com/ – Kochise Feb 03 '22 at 19:54