Question

我有一个夏威夷的背景图片，我希望每个单选按钮准确地位于岛屿的位置，当窗口变小时，我希望一切都响应但我有一个问题。当div的高度不会变小图像变得只有宽度，所以单选按钮没有正确的高度。我尝试了很多东西，但我无法解决这个问题。

以下是HTML代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="divmap">
    <input type="radio" name="island" value="Niihaou" id="Niihaou" required/>
    <input type="radio" name="island" value="Kauai" id="Kauai" required/>
    <input type="radio" name="island" value="Oahou" id="Oahou" required/>
    <input type="radio" name="island" value="Molokai" id="Molokai" required/>
    <input type="radio" name="island" value="Lanai" id="Lanai" required/>
    <input type="radio" name="island" value="Maui" id="Maui" required/>
    <input type="radio" name="island" value="Kahoolawe" id="Kahoolawe" required/>
    <input type="radio" name="island" value="Hawaii" id="Hawaii" required/>
</div>

CSS：

.divmap{    
background: url(http://travelquaz.com/wp-content/uploads/2015/09/maps-directions-hawaii-resort-rentals.jpg)  no-repeat ;
background-size: contain;
width: 700px;
height: 400px;
border: 1px solid red;
max-width: 100%;
}
#Niihaou{
position: relative;
left: 40%;
top:20%;
}

你可以看到div的大小，因为我使用了边框，我希望它与背景图像始终保持相同的高度。我只想要一个HTML / CSS解决方案，因为项目。这是我关于stackoverflow的第一个问题，所以如果我做错了，请告诉我。

Div高度与响应背景图像

0 个答案: