我正在尝试提供指向响应图像的链接。一切工作正常,但是我无法弄清楚如何真正将图像链接到站点。我尝试在每个div类中添加一行,但是它会调整图像的大小并且不起作用。我希望有人可以指出正确的方向。我的代码如下。提前致谢!
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#picImg:hover {opacity: 0.7;}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
@media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
@media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
@media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:95%; height: 300px image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:95%; height: 300px image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
最佳答案
尝试使用width:50vw;
和height:50vh;
然后删除transition:0.3s;
我刚刚将其更改为0.0s。在style=height:300px
将高度和宽度(style="width:95%; height:300px
)更改为
(style="width:100%; height:100%
)
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
/*Pictures*/
#picImg {
border-radius: 5px;
cursor: pointer;
transition: 0.0s;
width: 50vw;
height:50vh;
}
#picImg:hover {opacity: 0.7;}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100px;
}
}
<!DOCTYPE html>
<html>
<body>
<style>
.row {display: flex; flex-wrap: wrap; padding: 0 4px;}
.column {flex: 25%; max-width: 25%; padding: 0 4px;}
.column img {margin-top: 4px; vertical-align: middle;}
@media screen and (max-width: 10000px){.column {flex: 25%; max-width: 50%;}
@media screen and (max-width: 1200px){.column {flex: 50%; max-width: 66%;}
@media screen and (max-width: 800px){.column {flex: 100%; max-width: 100%;}
</style>
</body>
<div class="row">
<div class="column">
<img id="picImg" src="LatestSnowfallReports.png" alt="Latest Snowfall/Wind
Reports" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
<div class="column">
<img id="picImg" src="SnowfallReportMap.png" alt="Snowfall Report Map" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="SnowReport.png" alt="Submit A Report" text-
align="center" style="width:100%; height: 100%; image-rendering:crips-
edges;">
</div>
<div class="column">
<img id="picImg" src="WinterClimatology.png" alt="Northern Arizona Winter
Climatology" text-align="center" style="width:100%; height: 100%; image-
rendering:crips-edges;">
</div>
</div>
</body>
</html>
关于html - 将响应图像链接到URL,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53053632/