如何在 CSS 中自動將 div 大小調整為其中的圖像大小？

Question

我正在開發一個學生可以用來測試他們的解剖知識的網站。 這個想法是隨機詢問一個解剖結構（例如“氣管”），然后單擊相應的白框（一個虛線 div），如果選擇了正確的那個，那么這個白框就會消失。

我似乎無法使圖像與放置它的 div 一起縮小。當我使用瀏覽器 window 的大小時，我希望 div 始終具有與其中的圖像完全相同的尺寸。 現在情況並非如此，並且 div 始終可見（我已將背景顏色設為黃色以顯示我的意思）。

我嘗試將帶有圖像的潛水放在另一個名為“容器”的 div 中，看看我能做什么。 我曾在這個想法上胡鬧，然后放棄了。 也許這是一種可能性，但在 web 開發/網頁設計方面我仍然是菜鳥，所以我不知道該怎么做。

（以百分比而不是像素工作以使其與多種屏幕尺寸兼容）

 /*#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>

Answer 1

我希望這與您想要實現的目標有關。 在這種情況下，使用 div 作為寬度為 70% 的容器。 意味着在這種情況下它將占身體的 70%。

然后給容器 css declaration of object-fit: contain; . 意味着圖像必須取整體，同時包含圖像縱橫比。

給圖像一個寬度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>

Answer 2

這將使父 div .outer保持與圖像相同的比例。

::before部分創建一個具有圖像比例百分比的偽元素。 在這種情況下，使用的圖像為 200px x 300px，因此我們將使用以下公式，將高度除以寬度並乘以 100%： calc(300 / 200 * 100%) 。

這是一個可視化的網站： https://ratiobuddy.com/

CSS 技巧在這里談論它： https://css-tricks.com/aspect-ratio-boxes/

但是，使按鈕重新定位，這是一個不同的問題。 我嘗試查看如何使其 position 響應，但沒有運氣。

<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%;
}

如何在 CSS 中自動將 div 大小調整為其中的圖像大小？

問題描述

2 個解決方案

解決方案1
0 2020-12-26 23:08:52

解決方案2
0 2020-12-27 00:05:09

如何在 CSS 中自動將 div 大小調整為其中的圖像大小？

問題描述

2 個解決方案

解決方案1 0 2020-12-26 23:08:52

解決方案2 0 2020-12-27 00:05:09

解決方案1
0 2020-12-26 23:08:52

解決方案2
0 2020-12-27 00:05:09