Адаптация картинки

Question

не могу разобраться с адаптацией картинки. Пробовал уже все что можно, ни max-width, ни отдельный див и тд не помогает. Как реализовать чтобы она была статична и не двигалась с изменением масштаба браузера?

P.S картинка нужна конкретно таких масштабов, 765x610 и на таких позициях как указано в "left" и "top"

body {
  color: #fefefe;
  font-family: 'Ubuntu';
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.3em;
  line-height: 2;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  text-align: center;
  background: url("https://cutewallpaper.org/21/black-gif-background/Black-gif-background-3-GIF-Images-Download.gif");
  background-position: top center;
  object-fit: cover;
  z-index: 5;
}

.headart {
  position: absolute;
  width: 765px;
  height: 610px;
  bottom: 0;
  left: 65vh;
  top: 1305px;
  right: 0;
  opacity: 0.7;
}

<img src="tanjro.png" loading="lazy" class="headart">

Answer 1

а ты не делай left в vh и убери right:0. Если нужен начальный vh. То через jquery

var baseWidth;
$(document).ready(function(){
 baseWidth=$(window).width();
 $(".headart").css('left',baseWidth*.65+'px')
});

БЛОГ НА HUSL

Адаптация картинки

Ответы (1 шт):