如何创建包含徽标的简单标题栏，并保留徽标的纵横比？
我正在尝试创建一个简单的页面，标题栏顶部有一个标题栏，标题栏左边有一个徽标。我对flexbox和grid并不熟悉，也不擅长CSS，但是使用网格作为主布局，给标题栏一个合理的高度，然后使用flexbox作为标题栏本身似乎是明智和惯用的。但我一直得到的结果不太正确。
第一次尝试在图像缩放方面有一个很大的问题。在阅读规格之后，扩展似乎是一个循环依赖关系，这是由一个</div>太多引起的。另外，我还没有听说过object-fit来控制图像的纵横比。
第二次尝试基本上没问题。唯一的问题是图像的“字母装箱”：图像内容很好，但是它的框太宽了，这是因为如何处理边距。object-fit: content和object-fit: scale-down正是要做的事情，但这不是我想要的。
第三次尝试看起来就像我想要的那样。但我只是通过引入变量和显式设置图像宽度和高度来实现这一点，而我希望通过采用网格+柔箱来避免这种情况。它还依赖于了解图像的纵横比和相应的尺寸。
有没有一种简单的方法可以在标题栏中包含一个图像，以保持图像的比率，并避免打太极拳？
下面的片段。谢谢!
尝试#1
* {
box-sizing: border-box;
}
.titleBar {
border: 1px solid orange;
align-items: center;
display: grid;
grid-template-rows: 150px;
height: 100%;
}
.titleBar div {
display: flex;
}
.titleBar img {
border: 5px solid lightgray;
max-height: 100%;
margin: 25px;
}<html>
<body>
<div class="titleBar">
<div>
<img src='https://www.fillmurray.com/600/600' />
</div>
</div>
</body>
</html>
尝试#2
* {
box-sizing: border-box;
}
body {
align-items: center;
display: grid;
grid-template-rows: 150px;
}
.titleBar {
border: 1px solid orange;
display: flex;
height: 100%;
}
.titleBar img {
border: 5px solid lightgray;
max-height: 100%;
margin: 25px;
object-fit: scale-down;
}<html>
<body>
<div class="titleBar">
<img src='https://www.fillmurray.com/600/600' />
</div>
</body>
</html>
尝试#3
* {
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
--border-size: 1px;
--row-height: 150px;
--img-margin: 10px;
}
body {
display: grid;
grid-template-rows: var(--row-height);
}
.titleBar {
border: 1px solid orange;
align-items: center;
display: flex;
}
.titleBar img {
border: 5px solid lightgray;
margin: var(--img-margin);
max-height: calc(var(--row-height) - 2*var(--img-margin));
max-width: calc(var(--row-height) - 2*var(--img-margin));
object-fit: scale-down;
}<html>
<body>
<div class="titleBar">
<img src='https://www.fillmurray.com/600/600' />
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-05-18 21:51:16
我想这事已经解决了。有两个问题，一个大的和一个小的。
问题1-柔箱的默认align-items是stretch。因为我占据了整个高度，我不认为这很重要，但在W3C CSS盒对齐规范(第6.1节)的深处，它说的是关于stretch的
注意:拉伸关键字可能导致元素收缩，以适应它们的容器。
这导致我的标志容器垂直收缩，这导致了太极拳。改为align-items: center解决了这个问题。
第二个问题不是问题，而是更直截了当。例如，我在一个固定高度为100 max的网格行中放置了一个5:1宽宽比、10 max边框和100%最大高度的图像。布局引擎计算了一个500x100的盒子。太完美了。然而，一旦10 on边框被设置，就会留下480x80的内容区域，而这不是5:1。因此，它别无选择，只能拉伸、剪辑或信箱图像，这取决于object-fit。
我不确定我对#2问题的解决方案是否最好，但我决定使用box-sizing: content-box，并将我的身高提高到100% -2*边框大小。所有的工作，所有的图像，所有的高宽比，我从来不需要指定宽度。
3例具有3种不同纵横比的片段：
* {
box-sizing: border-box;
}
body {
align-items: center;
border-top: 1px dotted gray;
display: grid;
grid-template-rows: 100px 100px 100px;
margin: 20px 0px 0px 0px;
;
padding: 0px;
row-gap: 25px;
}
.titleBar2 {
border: 1px solid orange;
display: flex;
height: 100%;
align-items: center;
margin: 0px;
column-gap: 25px;
}
.titleBar2 img {
box-sizing: content-box;
--border: 10px;
background-color: pink;
border: var(--border) solid lightgray;
max-height: calc(100% - 2*var(--border));
margin: 0px;
object-fit: contain;
}<html>
<body>
<div class="titleBar2">
<img src='https://www.fillmurray.com/1200/600' />
<a href='https://www.fillmurray.com/1200/600' target='new'>https://www.fillmurray.com/1200/600</a>
</div>
<div class="titleBar2">
<img src='https://www.fillmurray.com/600/1200' />
<a href='https://www.fillmurray.com/600/1200' target='new'>https://www.fillmurray.com/600/1200</a>
</div>
<div class="titleBar2">
<img src='https://www.fillmurray.com/2000/400' />
<a href='https://www.fillmurray.com/2000/400' target='new'>https://www.fillmurray.com/2000/400</a>
</div>
</body>
</html>
https://stackoverflow.com/questions/61853662
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号