动态div比例缩放图像
我试了一段时间来解决这个问题。它用html和css编码。
简而言之：我想在缩放浏览器窗口时查看图像上的所有div。在垂直调整窗口大小时出现问题，这里是图像：
In the css i have like this code for every box:
#map > .screen > .upr {
position: absolute;
left: auto;
top: 51.5%;
left: 19%;
}
这是图像
#map > img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-60%);
}
有没有机会为我链接任何教程？
更新1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style_map.css">
<?php require 'favicon.php' ?>
<title></title>
</head>
<body>
<div class="table_box">
<div id="inner"><div class="logo"><p><a href="gentable_1.php">Example</a></div></div><br>
</div>
<div id = "map">
<img src = "bg_bic.jpg" />
<div class = "screen">
<div class='drop-shadow-red iskar'><p class='ptext'><a class='acd' href='Iskar.php' ><img class='img-blink' src='red.png' alt='Внимание повреда!' /> ЯР </p></a></div>
<div class='drop-shadow upr'><p class='ptext'><a class='acd' href='./HQ.php' ><b> 1 </b></а></p></div>
<div class='drop-shadow batak'><p class='ptext'><a class='acd' href='./Batak.php' ><b> 2 </b></а></p></div>
<div class='drop-shadow kalin'><p class='ptext'><a class='acd' href='./Kalin.php' ><b> 3 </b></а></p></div>
<div class='drop-shadow petrohan'><p class='ptext'><a class='acd' href=''><b> 4 </b></а></p></div>
<div class='drop-shadow bel'><p class='ptext'><a class='acd' href=''><b> 5 </b></а></p></div>
<div class='drop-shadow beg'><p class='ptext'><a class='acd' href=''><b> 6 </b></а></p></div>
<div class='drop-shadow rod'><p class='ptext'><a class='acd' href='rodopi.php' ><b> 7 </b></div>
<div class='drop-shadow vuch'><p class='ptext'><a class='acd' href='QR_Vucha.php' ><b> 8 </b></div>
<div class='drop-shadow sta'><p class='ptext'><a class='acd' href='./stamboliiski.php' ><b> 9 </b></а></p></div>
<div class='drop-shadow kop'><p class='ptext'><a class='acd' href='./koprinka.php' ><b> 10 </b></а></p></div>
<div class='drop-shadow htka'><p class='ptext'><a class='acd' href='./htk_arda.php' ><b> 11 </b><br /></а></p></div>
<div class='drop-shadow rozk'><p class='ptext'><a class='acd' href=''><b> 12 </b></а></p></div>
<div class='drop-shadow ovch'><p class='ptext'><a class='acd' href='./Ovcharitsa.php' ><b> 13</b></а></p></div>
</div>
</div>
</body>
</html>
CSS：
- { 保证金：0; 填充：0;
}
body {
background-color: #E0E7E9;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0px auto;
}
html, body, #map {
height: 100%;
}
#map {
z-index: 98;
}
#map, .table_boxbox {
overflow: hidden;
position: relative;
margin: 5px 50px 10px 50px;
border-radius: 8px;
background: -webkit-linear-gradient(rgba(0,0,0), rgba(0,0,0,0.2)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.2)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,2)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(6,154,166,0.01), rgba(255,255,255,0.5)); /* Standard syntax */
border-bottom: 1px solid #069AA6;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) ;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) ;
box-shadow:0 1px 6px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) ;
}
#map > .screen,
#map > img {display: block; width: auto; max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-60%);
}
#map > .screen > .box1,
#map > .screen > .box2{
clear: both;
content: "";
position: absolute;
top: 56.5%;
left: 23%;
text-align: center;
}
.drop-shadow {
padding: 0.6vh 1vh;
background: url(images/green.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
background-color: rgba(250, 250, 250, 0.8);
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 12px 0;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
}
.drop-shadow-red {
padding: 0.6vh 1vh;
background: url(images/red.png) no-repeat center left;
background-size: 2vh;
background-position: 6px 50%;
background-color: rgba(250, 250, 250, 0.8);
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 12px 12px 12px 0;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
}
#map > .screen > .upr {
position: absolute;
left: auto;
top: 51.5%;
left: 19%;
}
#map > .screen > .batak {
position: absolute;
top: 69%;
left: 31%;
}
#map > .screen > .kalin {
position: absolute;
top: 65%;
left: 22%;
}
#map > .screen > .petrohan {
position: absolute;
top: 39.5%;
left: 17%;
}
#map > .screen > .bel {
position: absolute;
top: 63%;
left: 27%;
}
#map > .screen > .beg {
position: absolute;
top: 71.8%;
left: 30%;
}
#map > .screen > .rod {
position: absolute;
top: 76%;
left: 31%;
}
#map > .screen > .vuch {
position: absolute;
top: 73.9%;
left: 35%;
}
#map > .screen > .htka {
position: absolute;
top: 75.7%;
left: 49.2%;
}
#map > .screen > .sta {
position: absolute;
top: 43%;
left: 45.5%;
}
#map > .screen > .kop {
position: absolute;
top: 54%;
left: 47.5%;
}
#map > .screen > .rozk {
position: absolute;
top: 65.5%;
left: 56%;
}
#map > .screen > .ovch {
position: absolute;
top: 63%;
left: 60%;
}
#map > .screen > .legend {
position: absolute;
width: 420px;
top: 80%;
left: 67%;
}
@media screen and (min-aspect-ratio: 2842/2383) {
#map > img {
width: 100vw;
}
#map > .screen {
width: 100vw;
height: 83.85vw;
}
}
@media screen and (max-aspect-ratio: 2842/2383) {
#map > img {
height: 100vh;
}
#map > .screen {
height: 100vh;
height: 100vw;
}
}
.table_box {
height: 117px;
background: #069AA6;
font-size: 12px;
text-align: center;
border-bottom: 1px solid white;
background: -webkit-linear-gradient(left top, #0E384A, #069AA6); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #0E384A, #069AA6); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #0E384A, #069AA6); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #0E384A, #069AA6); /* Standard syntax */
}
.logo {
margin-left: 200px;
float: left;
color: white;
text-transform: uppercase;
background: url('images/NEKemblem.png');
background-repeat: no-repeat;
background-position: center left;
padding-left: 90px;
padding-top: 35px;
height: 75px;
width: 250px;
}
.logo a {
font-size: 16px;
text-decoration: none;
color: white;
}
table_box > inner > logo > p{
text-align: left;
}
#inner {
width: 50%;
margin: 0 auto;
}
/* -----> links for index_Iskar_OF.php */
.acd {
text-decoration: none;
color: rgba(0, 0, 0, 0.7);
font-family: arial;
display:block;
font-size: 0.9vw;
}
.acd:hover {
text-decoration: none;
color: rgba(0, 0, 0, 1);
}
.acd > img {
width: 1.8vh;
height: 1.8vh;
}
.acd > .img-blink{
animation: blinker 0.5s linear infinite;
}
.drop-shadow2 {
padding: 0.6vh 1vh;
background: rgba(250, 250, 250, 0.8);
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 12px;
border-radius: 12px;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
font-weight: bold
}
.ptext {
padding-left: 20px;
}
.normal{
color: darkgreen;
}
.warning{
color: red;
}
.warningBlink {
animation-duration: 1000ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
我可能会复制一些未使用的css代码，对不起。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？