英文:
How to make this image responsive while retaining its aspect ratio
问题
我目前正在使用HTML和CSS设计网站，并希望将这个图片 定位到页面中，如下所示：
我需要它具有响应性。
我为此部分所做的是：
HTML：
<div class="intro">
<img src="https://i.stack.imgur.com/GGDym.png" class="sensei-img">
</div>
CSS：
.intro {
width: 100vw;
height: 100vh;
position: relative;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
overflow: overlay;
display: flex;
flex-direction: row;
}
.intro .sensei-img {
position: absolute;
left: 5vw;
bottom: -10vh;
width: 70vw;
height: 100vh;
}
我可以使用 position:absolute; 完美地定位图像，但似乎无法使其尺寸具有响应性（我希望它在视口更改时保持其宽高比）。我应该怎么做？
英文:
I am currently working on a website design using HTML and CSS and I want to position this image to fit in the page like this:
I need it to be responsive.
What I did for its part is:
HTML:
<div class="intro">
<img src="https://i.stack.imgur.com/GGDym.png" class="sensei-img">
</div>
CSS:
.intro {
width: 100vw;
height: 100vh;
position: relative;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
overflow: overlay;
display: flex;
flex-direction: row;
}
.intro .sensei-img {
position: absolute;
left: 5vw;
bottom: -10vh;
width: 70vw;
height: 100vh;
}
I can position the image perfectly with position:absolute; but I can't seem to be able to make it's size responsive (I want it to retain its ratio even if the viewport changes). What should I do?
答案1
得分: 0
只需删除此属性，即可使其比例保持不变，即使视口发生变化：
.intro .sensei-img {height: 100vh;}
该图像将默认保持其纵横比。
英文:
For its ratio to be kept even if the viewport changes you can simply remove this property:
.intro .sensei-img {height: 100vh;}
The image will keep it's aspect ratio by default.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论