Question

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

Answer 1

尝试使用void deleteStuffThreaded(std::vector<myObj*> *objects) { for (auto obj : *objects) { delete obj; } objects->clear(); } void deleteStuff(std::vector<myObj*> *objects) //this crashes { std::thread deleteThread(&deleteStuffThreaded, objects); }和width:50vw;执行此操作然后删除我刚刚将其更改为0.0s的height:50vh;。将transition:0.3s;的高度和宽度（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;
}
}

将响应图像链接到URL

1 个答案: