調整窗口大小時如何使圖像和文本在HTML中對齊？

Question

我正在嘗試解決以下問題：在房屋藍圖的圖像上，我需要貼上“標簽”。 因此，在廚房上方，必須貼有“廚房”標簽； 在浴室，“浴室”等等。 即使調整了瀏覽器窗口的大小，標簽也必須保留在其對應的房間上。 如何保證僅使用HTML / CSS / JS？

這是我的HTML：

<html>
<head>
    <link href="overlay.css" rel="stylesheet" type="text/css" />
</head>
<div class="image">
      <img src="blueprint.png" alt="" />
      <span>LABEL</span>
</div>
</html>

假設廚房位置在頂部10％，在左側40％， overlay.css將如下所示：

img {
   max-width:100%; 
   max-height:100%;
}
.image { 
   position: relative;
   width: 100%; /* for IE 6 */
  overflow: hidden;
}  
span { 
   position: absolute; 
   top: 10%; 
   left: 40%; 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
}

可以，但是調整窗口大小會使所有內容和位置不合時宜。

Answer 1

我希望HTML5元素能給figure和figure figcaption 。 它們具有極大的嵌套協調。

從W3C：

圖形元素表示一個內容單元，可以選擇包含標題，該內容單元是獨立的，通常從文檔的主流中引用為單個單元，並且可以從文檔的主流中移開，而無需影響文檔的含義。

在Figure＆figcaption元素中可以找到精彩的博客文章。

讓圖片大小決定區域，不要像使用img { max-width:100%; max-height:100%; } img { max-width:100%; max-height:100%; } img { max-width:100%; max-height:100%; } 。

您的CSS也可以使用一些清理方法。

這是重新設計您的代碼的目的。 復制，粘貼並試一下。

<style type="text/css">
figure {
    margin: 0;
}
img {
    position: absolute;
}
figcaption {
    background: black;
    color: white;
    display: inline-block;
    font: bold 24px/45px Helvetica, Sans-Serif; 
    left: 10px;
    padding: 10px;
    position: relative;
    top: 10px;
}
</style>
<figure>
    <img src="bathroom.jpg" alt="Bathroom" />
    <figcaption>Bathroom</figcaption>
</figure>

調整窗口大小時如何使圖像和文本在HTML中對齊？

問題描述

1 個解決方案

解決方案1
1 2012-07-10 18:06:37

調整窗口大小時如何使圖像和文本在HTML中對齊？

問題描述

1 個解決方案

解決方案1 1 2012-07-10 18:06:37

解決方案1
1 2012-07-10 18:06:37