具有指向 URL 的响应式图像链接答案

【问题标题】：Having A Responsive Image Link To A URL具有指向 URL 的响应式图像链接
【发布时间】：2019-04-02 20:45:31
【问题描述】：

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

【问题讨论】：

请贴一个代码sn-p。

标签： html css image hyperlink responsive-design

【解决方案1】：

尝试使用 width:50vw; 和 height:50vh; 执行此操作然后去掉transition:0.3s;我刚刚改成0.0s。 style=height:300pxChange the heights and widths (style="width:95%; height:300px) to (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>

【讨论】：