如何解决Flexbox 图片库响应问题
我正在使用 flexBox 制作响应式图片库。为此,我的html结构如下:
<main class="image-container">
<div class="image-wrapper">
<img src="#">
</div>
<div class="image-wrapper">
<img src="#">
</div>
....so on many
</main>
以下是我的 css 片段:
.image-container {
width: 90%;
height: 2480px;
margin: 20px auto 0px;
background: rgba(209,217,223,0.705);
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-evenly;
align-content: space-evenly;
position: relative;
}
.image-wrapper {
width: 30%;
margin: 0px auto 8px;
flex-shrink: 0;
}
img{
width: 100%;
height: 100%;
}
现在为了使这个响应,我必须利用媒体查询。假设我的笔记本电脑屏幕宽度是 1280 像素。我试图得到 3 columns of images into 2 column at 760px breakpoint
。问题是当我尝试减小屏幕尺寸时,突然从最后一列生成了 1180 像素的尴尬空间。 我明白了,我的容器高度为 2480px 。因此,我的高度保持不变,并且 width is 90%
图像变小,第三列图像被添加到其他列中。我已经尽力了,所以欢迎提出任何建议。有什么可以用 html 或 css 做的吗?如果您无法理解场景,我很抱歉。
解决方法
对于此类问题,您应该将媒体查询代码添加到您的 css 文件中。如果你想在大屏幕上显示 3 个图像,你应该删除
flex-direction: row
来自 .image-container
以便 image-wrappers
可以并排。当屏幕缩小时,它们应该环绕。我在这里添加了 codepen 链接,以便您可以查看它。如果您有任何其他问题。我可以回答他们。 https://codepen.io/atesirem/pen/ExmPgdP
.image-container {
width: 90%;
margin: 20px auto 0px auto;
padding:20px;
background: rgba(209,217,223,0.705);
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-content: space-evenly;
position: relative;
}
.image-wrapper {
width: 30%;
margin: 0px auto 8px;
flex-shrink: 0;
}
img{
width: 100%;
height: auto;
}
@media screen and (max-width:991px) {
.image-container {
flex-wrap: wrap;
}
}
@media screen and (max-width:768px) {
.image-container {
}
.image-wrapper {
width: 45%;
}
}
@media screen and (max-width:500px) {
.image-container {
flex-direction: column;
}
.image-wrapper {
width: 90%;
}
}
,
这是我为使其变得更好所做的工作。希望能帮到你。
.image-container {
width: 90%;
height: 2800px;
min-height:fit-content;
scroll-behavior:smooth;
overflow:scroll;
max-width:1280px;
margin: 20px auto 20px auto;
padding: 20px 0px;
background: rgba(209,0.705);
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
align-content: space-evenly;
position: relative;
}
@media screen and (max-width:500px) {
.image-container {
flex-direction: column;
max-height: inherit;
}
.image-wrapper {
width: 90%;
}
}
@media screen and (max-width:500px) {
.image-wrapper {
width: 90%;
}
}
,
这里我添加了一个示例,显示不同高度的图像及其响应
/*
* The function calc is working wrong in case calculations in the Firefox
*/
.photobox{
display: inline-block;
}
.photobox__previewbox{
position: relative;
overflow: hidden;
}
.photobox__preview{
display: block;
max-width: 100%;
}
.photobox__previewbox:before{
content: "";
}
/* type 1 */
.photobox_type1 .photobox__previewbox:before{
width: 0;
height: 0;
padding: 25%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
background-color: var(--photoboxOverlay,rgba(0,.8));
transition: transform calc(var(--photoboxAnimationDuration,.4s) / 2) ease calc(var(--photoboxAnimationDuration,.2s) / 2);
will-change: transform;
transform: scale(0);
}
.photobox_type1:hover .photobox__previewbox:before{
transform: scale(2);
transition-duration: var(--photoboxAnimationDuration,.4s);
transition-delay: 0s;
}
.photobox_type1 .photobox__label{
width: 50%;
transform: translate(-200%,-50%);
transition: transform var(--photoboxAnimationDuration,.4s) ease-out;
will-change: transform;
position: absolute;
top: 50%;
left: 15%;
}
.photobox_type1:hover .photobox__label{
transition-duration: var(--photoboxAnimationDuration,.4s);
transform: translate(0,-50%);
}
/* type 2*/
.photobox_type2 .photobox__previewbox:before{
width: 0;
height: 0;
padding: 25%;
border-radius: 50%;
background-color: var(--photoboxOverlay,.8));
position: absolute;
top: 0;
right: 0;
transition: transform var(--photoboxAnimationDuration,.2s) ease calc(var(--photoboxAnimationDuration,.2s) / 2);
will-change: transform;
transform: scale(0);
}
.photobox_type2:hover .photobox__previewbox:before{
transform: scale(2);
transition-duration: var(--photoboxAnimationDuration,.4s);
transition-delay: 0s;
}
.photobox_type2 .photobox__label{
width: 50%;
text-align: right;
transform: translate(200%,.4s) ease-out;
will-change: transform;
position: absolute;
top: 50%;
right: 15%;
}
.photobox_type2:hover .photobox__label{
transition-duration: var(--photoboxAnimationDuration,-50%);
}
/* type 3 */
.photobox_type3 .photobox__previewbox:before{
width: 0;
height: 0;
padding: 25%;
background-color: var(--photoboxOverlay,.8));
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transition: transform var(--photoboxAnimationDuration,.4s) ease;
will-change: transform;
transform: translate(-50%,-50%) scale(0);
}
.photobox_type3:hover .photobox__previewbox:before{
transform: translate(-50%,-50%) scale(4);
transition-duration: calc(var(--photoboxAnimationDuration,.4s) * 2);
}
.photobox_type3 .photobox__label{
width: 95%;
text-align: center;
opacity: 0;
transform: translate(-50%,-50%);
transition: opacity var(--photoboxAnimationDuration,.4s) ease-out;
will-change: opacity;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
}
.photobox_type3:hover .photobox__label{
transition-duration: calc(var(--photoboxAnimationDuration,.4s) / 2);
transition-delay: calc(var(--photoboxAnimationDuration,.4s) / 2);
opacity: 1;
}
.photobox_type3 .photobox__preview{
transition: transform var(--photoboxAnimationDuration,.4s) cubic-bezier(0.71,0.05,0.29,0.9);
will-change: transform;
transform: scale(1);
}
.photobox_type3:hover .photobox__preview{
transform: scale(1.2);
}
/* type 4 */
.photobox_type4 .photobox__previewbox:before{
width: 0;
height: 0;
padding: 25%;
background-color: var(--photoboxOverlay,-50%) scale(0);
}
.photobox_type4:hover .photobox__previewbox:before{
transform: translate(-50%,.4s) * 2);
}
.photobox_type4 .photobox__label{
width: 95%;
text-align: center;
opacity: 0;
transform: translate(-50%,.4s) ease-out;
will-change: opacity;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
}
.photobox_type4:hover .photobox__label{
transition-duration: calc(var(--photoboxAnimationDuration,.4s) / 2);
opacity: 1;
}
.photobox_type4 .photobox__preview{
transition: transform var(--photoboxAnimationDuration,0.9);
will-change: transform;
transform: scale(1) translate(0,0);
}
.photobox_type4:hover .photobox__preview{
transform: scale(1.2) translate(4%,4%);
}
/*
* demo styles for photobox
*/
.photobox{
color: #fff;
font-size: 2.5rem;
font-weight: 700;
width: 33.33333%;
--photoboxOverlay: rgba(72,27,174,.7);
/*--photoboxAnimationDuration: .5s;*/
}
@media screen and (max-width: 480px){
.photobox{
width: 100%;
}
}
/*
=====
DEMO
=====
*/
@media (min-width: 768px){
html{
font-size: 62.5%;
}
}
@media (max-width: 767px){
html{
font-size: 50%;
}
}
a{
text-decoration: none;
color: inherit;
}
a:hover,a:focus{
text-decoration: underline;
}
.page{
flex-grow: 1;
order: 1;
}
.page__container{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
<div class="page">
<div class="page__demo">
<div class="page__container">
<div class="photobox photobox_type1">
<div class="photobox__previewbox">
<img src="https://profiladv.ro/wp-content/uploads/2017/03/spring-awakening-1197602_960_720.jpg" class="photobox__preview" alt="Preview">
<span class="photobox__label">Spring and beauty of nature</span>
</div>
</div>
<div class="photobox photobox_type2">
<div class="photobox__previewbox">
<img src="https://www.cesarsway.com/wp-content/uploads/2015/06/Spring-health-tips.jpg" class="photobox__preview" alt="Preview">
<span class="photobox__label">Looks so adorable</span>
</div>
</div>
<div class="photobox photobox_type3">
<div class="photobox__previewbox">
<img src="https://headtopics.com/images/2019/8/3/independent/fear-and-persecution-in-pakistan-s-hazara-community-1157503460163690496.webp" class="photobox__preview" alt="Preview">
<span class="photobox__label">Chashm badami</span>
</div>
</div>
<div class="photobox photobox_type4">
<div class="photobox__previewbox">
<img src="https://www.sidetracked.com/wp-content/uploads/2014/09/wakhan-corridor-JanBakker.jpg" class="photobox__preview" alt="Phot otaken by Jan Bakker">
<span class="photobox__label">A Short Walk in the Other Asia</span>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。