如何解决如何使不同大小的图像响应?
我有两张在桌面上大小相同的图片,但在移动设备上的高度不一样。如何在不设置特定高度的情况下在移动设备上也保持高度相同?
请参阅此处的屏幕截图:https://imgur.com/a/agz5T2z。
这是我的代码(ReactJS):
HTML:
<div className="container beigeBackground">
<h1>gallery</h1>
<div className="homegalleryContainer">
<img src="https://images.pexels.com/photos/1449773/pexels-photo-1449773.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage gallery 1"></img>
<img src="https://images.pexels.com/photos/6341164/pexels-photo-6341164.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Homepage gallery 2"></img>
</div>
<button>galLERY</button>
</div>
CSS:
.container {
padding: 4em;
background-color: rgb(240,240,240);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.beigeBackground {
background-color: var(--Beige);
padding: 4em 2em;
}
.beigeBackground * {
color: white;
}
.homegalleryContainer {
display: flex;
flex-direction: column;
padding-top: 4em;
padding-bottom: 3em;
}
.homegalleryContainer img {
width: 100%;
margin-bottom: 2em;
object-fit: cover;
}
.beigeBackground button {
border-color: white;
}
.beigeBackground button:hover {
background-color: white;
color: var(--Beige);
}
@media screen and (min-width: 768px) {
.beigeBackground {
padding: 4em 0;
}
.homegalleryContainer {
flex-direction: row;
padding: 4em 0;
padding-left: 2em;
/* to balance out margin-right of each img */
justify-content: center;
align-items: initial;
}
.homegalleryContainer img {
width: 40%;
margin-bottom: 0;
margin-right: 2em;
}
}
谢谢。
解决方法
这将使 img 响应
.homeGalleryContainer img {
max-width: 100%;
height: auto;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。