gpt4 book ai didi

css - 调整图像宽度但保持相同的高度

转载 作者:行者123 更新时间:2023-11-28 12:49:17 26 4
gpt4 key购买 nike

如果有人问过这个问题,我很抱歉,但我不确定措辞是否正确,所以无法搜索。我有一个宽度方向非常大的图像,我希望它在使用较小的分辨率时离开浏览器窗口,如果你有更大的分辨率,它会显示更多的图像(仅宽度方向,高度需要保持不变),这样无论您以何种分辨率浏览,图像的高度都将保持不变,因此页面内容将基本保持不变。只需将其与 img 标签放在一起即可调整整个图片以适合浏览器窗口,并在此过程中更改高度。下面是我想要发生的事情的非常粗略的图表。

Image Diagram

最佳答案

简单的选择是将 overflow: hidden; 添加到图像容器。例如。 http://codepen.io/pageaffairs/pen/Etikh

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}

</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>

</body>
</html>

关于css - 调整图像宽度但保持相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17129103/

26 4 0
文章推荐: css - 如何使表格居中?
文章推荐: javascript - 使用 jQuery 获取 html 文档中的链接值?
文章推荐: javascript - 如何从方法内部的回调函数访问对象属性?
文章推荐: html - 在 "absolute"
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com