我正在尝试创建一个响应式网站。我正在尝试向每个宽度为 70% 的容器添加一个图像。但我不知道如何设置图像以随着屏幕尺寸的变化进行调整。我的意思是我想让容器内的图像也具有响应能力。
我不确定我是否足够清楚地描述我的问题,如果您感到困惑或有任何疑问,请告诉我。
最佳答案
@troy-wu,你怎么看这个?
尝试在此处调整视口(viewport)宽度! https://jsfiddle.net/rickydam/ob4umwp3/
.one {
width: 70%;
background-color: lightgray;
display: inline-block;
}
.two {
width: 30%;
background-color: gray;
display: inline-block;
margin-left: -5px;
}
img {
max-height: 20vw;
display: inline-block;
}
<div class="one">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png">
</div>
<div class="two">
<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png">
</div>
关于html - 如何自动调整图像大小以适合 div 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44618740/