我正在尝试提供指向响应式图片的链接。一切正常，但我无法弄清楚如何真正让图像链接到网站。我尝试在每个 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/