Блог

Главная - Вопросы по программированию - Как автоматически настроить размер div на размер изображения внутри него в CSS?

Как автоматически настроить размер div на размер изображения внутри него в CSS?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я работаю над сайтом, который студенты могут использовать для проверки своих анатомических знаний. Идея состоит в том, чтобы случайным образом задать анатомическую структуру (например, «трахею»), а затем щелкнуть по соответствующему белому прямоугольнику (точечный div), и если выбран правильный, то этот белый прямоугольник исчезнет.

Кажется, я не могу заставить изображение сжиматься вместе с div, в который я его поместил. Когда я играю с размером окна моего браузера, я бы хотел, чтобы div всегда имел те же размеры, что и изображение внутри него. Сейчас это не так, и div всегда виден (я сделал цвет фона желтым, чтобы показать, что я имею в виду).

Я попытался поместить погружение с изображением в него внутри другого div, называемого «контейнером», чтобы посмотреть, что я могу сделать тогда. Я дурачился с этой идеей, а затем отказался от этого. Возможно, это возможно, но я все еще новичок, когда дело доходит до веб-разработки / веб-дизайна, поэтому я понятия не имею, что с этим делать.

(работает в процентах, а не в пикселях, чтобы сделать его совместимым с несколькими размерами экрана)

введите описание изображения здесь
введите описание изображения здесь

 /*#container {
    position: fixed;
    border: solid black 6px;
    background-color: yellow;
    top: 10%;
    left: 50%;
    width: 40%;
    height: 70%;
}*/

#image {
    /*top: 10%;
    left: 3%;*/
    top: 30%;
    left: 38%;
    width: 23%;
    height: 50%;    
    background-image: url(trachea.jpg);
    background-color: yellow;
    background-size: contain;
    background-repeat: no-repeat;
    border: solid black 3px;
    position: absolute;
    object-fit: cover;
}

#button_1 {
    top: 50%;
    left: 8%;
    width: 15%;
    height: 3%;
    /*width: 65px;
    height: 13px;*/
    border-style: dotted;
    position: relative;
    color: black;
    background-color: white;
} 
 <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--<div id="container">-->
        <div id= "image">
            <div id= "button_1"></div>
        </div>
    <!--</div>-->
</body>
</html>

Комментарии:

1. Я думаю, вы подходите к этому неправильно. Я бы рекомендовал использовать картинку в качестве фонового изображения вашего div. Затем вы можете изменить размер изображения с помощью background-size . Альтернативно используйте ‘object-fit’ и это в сочетании с любым contain, cover or scale-down из них. Однако в любом случае вы должны объявлять ширину или высоту только с помощью sue of contain . Другое значение будет иметь размер для поддержания соотношения изображений.

2. @tacoshy Я пытался это сделать, но когда я присваиваю только процент ширине, высота остается равной нулю.

Ответ №1:

Я надеюсь, что это то, чего вы пытаетесь достичь. В этом случае используйте div в качестве контейнера шириной около 70%. Означает, что в этом случае это будет 70% тела.

Затем дайте контейнеру значение css . object-fit: contain; Означает, что изображение должно занимать все целое, в то время как containign соотношение сторон изображения.

Дайте изображению ширину width: 100%; , равную всей ширине родительского элемента. Размер высоты будет автоматически соответствовать соотношению сторон изображения.

 .container {
  margin: 0 auto;
  width: 70%;
  object-fit: contain;
  border: 3px dotted black;
  position: relative;
}

img {
  width: 100%;
}

.text-box {
  height: 1em;
  width: 5em;
  border: 1px dotted black;
}

#lung {
  position: absolute;
  top: 60%;
  left: 20%;
  background-color: white;
}

#trachea {
  position: absolute;
  top: 35%;
  left: 30%;
  background-color: white;
}

#larynx {
  position: absolute;
  top: 20%;
  left: 55%;
  background-color: white;
} 
 <div class="container">
  <img src="https://www.thoughtco.com/thmb/8c4eB7FxIO6byYQ6UK8YdT6Fyck=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/respiratory_system-578d72f73df78c09e96906ff.jpg">
  <div class="text-box" id="lung">lung</div>
  <div class="text-box" id="trachea">trachea</div>
  <div class="text-box" id="larynx">larynx</div>
  
</div>

Ответ №2:

Это заставит родительский div, .outer , поддерживать то же соотношение, что и изображение.

::before Раздел создает псевдоэлемент с процентом отношения изображения. В этом случае используемое изображение составляет 200 пикселей x 300 пикселей, поэтому мы будем использовать следующую формулу, где мы делим высоту на ширину и умножаем ее на 100%: calc(300 / 200 * 100%) .

Вот веб-сайт, который визуализирует это: https://ratiobuddy.com /

CSS tricks рассказывает об этом здесь: https://css-tricks.com/aspect-ratio-boxes /

Однако изменение положения кнопки — это другая проблема. Я пытался понять, как сделать его положение отзывчивым, но не повезло.

 <div class="outer">
  <div class="inner">
    <div class="button"></div>
    <img class="image" src="http://placekitten.com/200/300" alt="">
  </div>
</div>
 
 body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  width: 100vw;
}

.outer {
  position: relative;
  width: 400px;
}

.outer::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: calc(300 / 200 * 100%); /* 300 = height, 200 = width. Replacing these values with your images will create the ratio needed */
}

.outer .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button {
  position: absolute;
  top: 50%;
  left: 15%;
  height: 20px;
  width: 100px;
  background-color: #fff;
  border: 2px dashed #000;
}

.image {
  width: 100%;
}