使图像容器响应
Make Image Container Responsive
我有 3 个水平对齐的图像容器，但我似乎无法使其响应。当屏幕尺寸较小时，方框会变小并且文字会错位。我希望当屏幕尺寸较小时容器垂直对齐并且容器具有固定形状并且文本与容器保持在一起。
这是我的代码：
.images-container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
top: -30px;
position: relative;
display: flex;
justify-content: center;
}
.imgwide {
width: 31.3%;
height: 450px;
border-radius: 7px;
margin: 10px 10px 10px 10px;
cursor: pointer;
}
.imgwide:hover {
transition: all .1s ease-in-out;
transform: scale(0.99);
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
position: absolute;
left: 380px;
bottom: 9px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.bottom-left {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 48px;
color: white;
font-size: 1.3em;
bottom: 25px;
}
.bottom-left2 {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 521px;
color: white;
font-size: 1.2em;
}
.bottom-left3 {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 991px;
color: white;
font-size: 1.2em;
}
<div class="images-container">
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('assets/vr.jpeg');background-size: 600px; background-position: center;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left"> VR Tour<i class="arrow right"></i></div>
</a>
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left2">Trails<i class="arrow right"></i></div>
</a>
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px; background-position: center;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left3">Grandfathers Road<i class="arrow right"></i></div>
</a>
</div>
您的代码无法正常工作，因为您使用 position 的方式有误。
you don't need to make three different classes for your titles just make one class and set it's position to absolute and bottom:0;, then instead of setting position: relative; to .images-container set it to .imgwide, after this the titles should stick to bottom of the items
我为你制作希望对你有帮助，还做了一些修改使其更干净:)
[...document.querySelectorAll('.images-container .img')].forEach(img => {
img.addEventListener('click', function() {
window.open(this.children[0].href, '_blank');
});
});
.images-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
height: auto;
}
.img {
position: relative;
width: calc(100% / 3);
min-width: 180px;
margin: 5px;
height: 350px;
border-radius: 7px;
overflow: hidden;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
background-position: center !important;
transition: all .1s ease;
cursor: pointer;
}
/* change images here */
.img:nth-child(1) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/ndN00KmbJ1c/640x400');
}
.img:nth-child(2) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/mBQIfKlvowM/640x400');
}
.img:nth-child(3) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/y2azHvupCVo/640x400');
}
.img:hover {
transform: scale(0.99);
}
.title {
position: absolute;
display: flex;
align-items: center;
width: 100%;
white-space: nowrap;
height: auto;
padding: 15px;
--title-color: #ffffff;
color: var(--title-color);
font-size: max(16px, 1.2vw);
bottom: 0;
}
.title::after {
content: '';
display: inline-block;
padding: 3px;
border: solid var(--title-color);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
margin: 0 8px;
}
@media only screen and (max-width: 600px) {
.images-container {
flex-direction: column;
}
.img {
width: 95%;
height: 330px;
margin: 10px;
}
.title {
font-size: max(16px, 1.5vw);
}
}
<div class="images-container">
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
<div class="img">
<a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
<div class="title">Self-Guided Heritage Trails</div>
</a>
</div>
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
</div>
...已更新...
这很简单，您可以使用 margin 做到这一点。
附加示例
[...document.querySelectorAll('.images-container .img')].forEach(img => {
img.addEventListener('click', function() {
window.open(this.children[0].href, '_blank');
});
});
.head-title {
border-left: 5px red solid;
width: inherit;
margin: 5px;
padding: 10px;
}
.images-container {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.images-container .holder {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.img {
position: relative;
width: calc(100% / 3);
min-width: 180px;
margin: 5px;
height: 350px;
border-radius: 7px;
overflow: hidden;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
background-position: center !important;
transition: all .1s ease;
cursor: pointer;
}
/* change images here */
.img:nth-child(1) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/ndN00KmbJ1c/640x400');
}
.img:nth-child(2) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/mBQIfKlvowM/640x400');
}
.img:nth-child(3) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/y2azHvupCVo/640x400');
}
.img:hover {
transform: scale(0.99);
}
.title {
position: absolute;
display: flex;
align-items: center;
width: 100%;
white-space: nowrap;
height: auto;
padding: 15px;
--title-color: #ffffff;
color: var(--title-color);
font-size: max(16px, 1.2vw);
bottom: 0;
}
.title::after {
content: '';
display: inline-block;
padding: 3px;
border: solid var(--title-color);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
margin: 0 8px;
}
@media only screen and (max-width: 600px) {
.head-title {
margin: 5px 1%;
}
.images-container .holder {
flex-direction: column;
}
.img {
width: 98%;
height: 390px;
}
.title {
font-size: max(16px, 1.5vw);
}
}
<div class="images-container">
<div>
<h2 class="head-title">Title 1</h2>
</div>
<div class="holder">
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
<div class="img">
<a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
<div class="title">Self-Guided Heritage Trails</div>
</a>
</div>
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
</div>
</div>
<div class="images-container">
<div>
<h2 class="head-title">Title 2</h2>
</div>
<div class="holder">
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
</div>
</div>
我有 3 个水平对齐的图像容器，但我似乎无法使其响应。当屏幕尺寸较小时，方框会变小并且文字会错位。我希望当屏幕尺寸较小时容器垂直对齐并且容器具有固定形状并且文本与容器保持在一起。
这是我的代码：
.images-container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
top: -30px;
position: relative;
display: flex;
justify-content: center;
}
.imgwide {
width: 31.3%;
height: 450px;
border-radius: 7px;
margin: 10px 10px 10px 10px;
cursor: pointer;
}
.imgwide:hover {
transition: all .1s ease-in-out;
transform: scale(0.99);
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
position: absolute;
left: 380px;
bottom: 9px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.bottom-left {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 48px;
color: white;
font-size: 1.3em;
bottom: 25px;
}
.bottom-left2 {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 521px;
color: white;
font-size: 1.2em;
}
.bottom-left3 {
position: absolute;
min-width: 700px;
width: 50%;
bottom: 30px;
left: 991px;
color: white;
font-size: 1.2em;
}
<div class="images-container">
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('assets/vr.jpeg');background-size: 600px; background-position: center;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left"> VR Tour<i class="arrow right"></i></div>
</a>
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left2">Trails<i class="arrow right"></i></div>
</a>
<div class="imgwide" style="background:linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,1)), url('');background-size: 600px; background-position: center;" onclick="window.open('', '_blank')"></div>
<a href="" target="_blank">
<div class="bottom-left3">Grandfathers Road<i class="arrow right"></i></div>
</a>
</div>
您的代码无法正常工作，因为您使用 position 的方式有误。
you don't need to make three different classes for your titles just make one class and set it's
positiontoabsoluteandbottom:0;, then instead of settingposition: relative;to.images-containerset it to.imgwide, after this the titles should stick to bottom of the items
我为你制作希望对你有帮助，还做了一些修改使其更干净:)
[...document.querySelectorAll('.images-container .img')].forEach(img => {
img.addEventListener('click', function() {
window.open(this.children[0].href, '_blank');
});
});
.images-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
height: auto;
}
.img {
position: relative;
width: calc(100% / 3);
min-width: 180px;
margin: 5px;
height: 350px;
border-radius: 7px;
overflow: hidden;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
background-position: center !important;
transition: all .1s ease;
cursor: pointer;
}
/* change images here */
.img:nth-child(1) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/ndN00KmbJ1c/640x400');
}
.img:nth-child(2) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/mBQIfKlvowM/640x400');
}
.img:nth-child(3) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/y2azHvupCVo/640x400');
}
.img:hover {
transform: scale(0.99);
}
.title {
position: absolute;
display: flex;
align-items: center;
width: 100%;
white-space: nowrap;
height: auto;
padding: 15px;
--title-color: #ffffff;
color: var(--title-color);
font-size: max(16px, 1.2vw);
bottom: 0;
}
.title::after {
content: '';
display: inline-block;
padding: 3px;
border: solid var(--title-color);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
margin: 0 8px;
}
@media only screen and (max-width: 600px) {
.images-container {
flex-direction: column;
}
.img {
width: 95%;
height: 330px;
margin: 10px;
}
.title {
font-size: max(16px, 1.5vw);
}
}
<div class="images-container">
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
<div class="img">
<a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
<div class="title">Self-Guided Heritage Trails</div>
</a>
</div>
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
</div>
...已更新...
这很简单，您可以使用 margin 做到这一点。
附加示例
[...document.querySelectorAll('.images-container .img')].forEach(img => {
img.addEventListener('click', function() {
window.open(this.children[0].href, '_blank');
});
});
.head-title {
border-left: 5px red solid;
width: inherit;
margin: 5px;
padding: 10px;
}
.images-container {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.images-container .holder {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.img {
position: relative;
width: calc(100% / 3);
min-width: 180px;
margin: 5px;
height: 350px;
border-radius: 7px;
overflow: hidden;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
background-position: center !important;
transition: all .1s ease;
cursor: pointer;
}
/* change images here */
.img:nth-child(1) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/ndN00KmbJ1c/640x400');
}
.img:nth-child(2) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/mBQIfKlvowM/640x400');
}
.img:nth-child(3) {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .9)), url('https://source.unsplash.com/y2azHvupCVo/640x400');
}
.img:hover {
transform: scale(0.99);
}
.title {
position: absolute;
display: flex;
align-items: center;
width: 100%;
white-space: nowrap;
height: auto;
padding: 15px;
--title-color: #ffffff;
color: var(--title-color);
font-size: max(16px, 1.2vw);
bottom: 0;
}
.title::after {
content: '';
display: inline-block;
padding: 3px;
border: solid var(--title-color);
border-width: 3px 3px 0 0;
transform: rotate(45deg);
margin: 0 8px;
}
@media only screen and (max-width: 600px) {
.head-title {
margin: 5px 1%;
}
.images-container .holder {
flex-direction: column;
}
.img {
width: 98%;
height: 390px;
}
.title {
font-size: max(16px, 1.5vw);
}
}
<div class="images-container">
<div>
<h2 class="head-title">Title 1</h2>
</div>
<div class="holder">
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
<div class="img">
<a href="https://pa-heritage-trails.web.app/overview.html" target="_blank">
<div class="title">Self-Guided Heritage Trails</div>
</a>
</div>
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
</div>
</div>
<div class="images-container">
<div>
<h2 class="head-title">Title 2</h2>
</div>
<div class="holder">
<div class="img">
<a href="https://explore-grandfather-road.web.app/" target="_blank">
<div class="title">Let's Explore Our <br>Grandfathers Road</div>
</a>
</div>
<div class="img">
<a href="https://virtualtour.eurasians.org.sg/ehg/" target="_blank">
<div class="title">Eurasian Heritage Gallery VR Tour</div>
</a>
</div>
</div>
</div>