Наличие адаптивного изображения Ссылка на URL - PullRequest
Новая
       12

Наличие адаптивного изображения Ссылка на URL

0 голосов
/ 29 октября 2018

Я пытаюсь предоставить ссылку на отзывчивое изображение. Все работает правильно, но я не могу понять, как на самом деле получить изображение для ссылки на сайт. Я попытался добавить строку в каждом классе 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>

1 Ответ

0 голосов
/ 30 октября 2018

Попробуйте сделать это с width:50vw; и height:50vh; Затем удалите transition:0.3s; Я только что изменил его на 0,0 с. Вы также забыли свои точки с запятой после 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>
...