英文:
CSS `width: max-content` not working properly in Firefox
问题
The issue you're facing with the extra space around the image in Firefox may be related to the default margin applied to the body element in some browsers. To fix this, you can add a CSS rule to remove the margin on the body element:
body {
margin: 0;
}
Adding this rule should help ensure that the .trending.container takes up the width of the inner image without any extra space on the left and right side.
英文:
I have a image container which should resize itself according to the width of the image but it isn't resizing itself properly in Firefox, it works perfectly in chrome but in Firefox there is some space around the image, I have set the image's height to 100% to make it take up all the height of the container.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 899px;
height: 500px;
padding: 1rem;
gap: 0.5rem;
display: flex;
flex-direction: column;
background-color: #303030;
}
.card {
height: 100%;
width: 100%;
background-color: #202020;
border-radius: 10px;
overflow: hidden;
}
.section-heading {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: uppercase;
}
.section-heading>h2 {
font-weight: 500;
letter-spacing: 1px;
font-size: 1rem;
}
.section-heading a {
text-decoration: none;
transition: 0.1s all linear;
}
.section-heading>a {
font-size: 0.8rem;
letter-spacing: 1px;
font-weight: 500;
}
.section-heading a:hover {
color: var(--theming);
}
.trending.card {
display: flex;
position: relative;
padding: 1rem;
gap: 0.5rem;
}
.cover-container {
overflow: hidden;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
transition: 0.1s all linear;
background-color: red;
}
.cover-container:hover {
filter: brightness(0.7);
}
.cover {
width: 100%;
background-color: var(--same-background);
opacity: 0;
transition: 0.2s all linear;
}
.title a {
text-decoration: none;
transition: 0.1s all linear;
}
.title a:hover {
color: var(--theming);
}
.genres {
display: flex;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.genre {
padding: 0.1rem 0.5rem;
text-decoration: none;
border-radius: 5px;
background-color: #404040;
transition: 0.1s all linear;
color: var(--secondary-color);
}
.genre:hover {
background-color: var(--primary-background);
}
.genre:active {
background-color: var(--lighter-background);
}
.trending.banner {
height: 30%;
width: 100%;
background-color: var(--same-background);
position: absolute;
align-self: flex-start;
z-index: 0;
background-size: cover;
background-position: center;
filter: brightness(0.5);
overflow: hidden;
top: 0;
left: 0;
transition: 0.2s all linear;
}
.trending.cover-container {
height: 100%;
width: max-content;
max-width: 40%;
z-index: 3;
border-radius: 10px;
flex-shrink: 0;
border-radius: 10px;
}
.trending.manga.cover {
height: 100%;
width: auto;
}
.trending.info {
width: 100%;
height: 71%;
align-self: flex-end;
padding: 0.5rem;
gap: 0.1rem;
display: flex;
flex-direction: column;
}
.trending.title {
font-weight: 500;
font-size: 1.5rem;
flex-shrink: 0;
}
.trending.description {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 6;
flex-shrink: 0;
color: var(--secondary-color);
}
.trending.actions {
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
.trending.action {
height: 2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: var(--same-background);
border-radius: 5px;
border: none;
transition: 0.1s all linear;
cursor: pointer;
color: var(--secondary-color);
}
.nav {
width: 2.5rem !important;
}
.nav-icon {
height: 100%;
}
.nav-icon path {
stroke: var(--secondary-color);
stroke-width: 1.5;
}
.trending.action:hover {
background-color: var(--primary-background);
}
.trending.action:active {
background-color: var(--lighter-background);
}
<!-- language: lang-html -->
<div class="trending container">
<div class="trending section-heading">
<h2><a href="#">Trending Now</a></h2>
<a href="#">View All</a>
</div>
<div class="trending card" id="1">
<div class="trending banner">
<img src="https://s4.anilist.co/file/anilistcdn/media/manga/banner/117195-VVYq1EEOwR0K.jpg" alt="" class="trending cover" loading="lazy" style="opacity: 1;">
</div>
<a href="/manga/117195" class="trending cover-container">
<img src="https://s4.anilist.co/file/anilistcdn/media/manga/cover/large/bx117195-r3kf8eF0xkDJ.png" alt="" class="trending manga cover" loading="lazy" style="opacity: 1;">
</a>
<div class="trending info">
<h3 class="trending title"><a href="/manga/117195">[Oshi no Ko]</a></h3>
<div class="genres">
<a href="/search/manga/Drama" class="trending genre">Drama</a>
<a href="/search/manga/Mystery" class="trending genre">Mystery</a>
<a href="/search/manga/Psychological" class="trending genre">Psychological</a>
<a href="/search/manga/Supernatural" class="trending genre">Supernatural</a>
</div>
<p class="trending description">Gorou is a gynecologist and idol fan who’s in shock after his favorite star, Ai, announces an impromptu hiatus. Little does Gorou realize that he’s about to forge a bond with her that defies all common sense! Lies are an idol’s weapon! (Source:
Yen Press)</p>
<div class="trending actions">
<a href="/manga/117195/read" class="trending action read">Read this Manga</a>
<button class="trending action nav previous">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Arrow / Arrow_Right_SM">
<path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</button>
<button class="trending action nav next">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Arrow / Arrow_Right_SM">
<path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- end snippet -->
This is the code, and the .trending.container is supposed to take up the width of the inner image but it there is some extra space on left and right side of the image, this extra space is only visible in Firefox and the .trending.container is only as wide as image in chrome and works as I expected it to. Please help, thank you. JSFiddle
答案1
得分: 2
## Workaround Summary
我发现在包围锚点标签（`.trending.cover-container`）上应用`display: contents`，然后将重要的视觉样式移到图像本身（`.trending.manga.cover`）似乎解决了在Chrome和Firefox中的问题。
## Explanation
围绕图像的这些额外间距非常难以去除，这是因为在CSS中百分比宽度/高度的工作方式。基本上，当指定百分比高度时：
- 百分比是相对于生成的盒子的包含块的高度计算的。
- “包含块”由父级块级元素或创建新的格式化上下文的最近元素识别（例如，flex或grid容器）。
- 如果未明确指定包含块的高度，则值计算为`auto`。
[在MDN上的来源](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
现在，我对浏览器实现不是专家，但我预期Chrome与Firefox之间的差异来自于它们如何解释“明确”的一词。在调试您的CSS时，我发现如果在层次结构中应用足够的硬编码像素尺寸，额外的间距将在Chrome和Firefox上消失。但是，当然，所有这些硬编码会导致难以维护的样式表。
作为一种替代方法，我发现按上述描述应用`display: contents`似乎以相当不显眼的方式解决了这个问题。请参阅下面的代码片段。您可能可以删除更多因此更改而变得不必要的样式，但我只进行了基本的修改。
<!-- 开始片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
（您的CSS代码）
<!-- 语言：lang-html -->
（您的HTML代码）
<!-- 结束片段 -->
英文:
Workaround Summary
I found that applying display: contents on the surrounding anchor tag (.trending.cover-container) and then moving the important visual styles down to the image itself (.trending.manga.cover) seemed to resolve the issue in both Chrome and Firefox.
Explanation
This extra spacing around the image is extremely difficult to remove, due to how percentage widths/heights work in CSS. Basically, when specifying a percentage height:
- The percentage is calculated with respect to the height of the generated box's containing block.
- A "containing block" is identified by a parent block-level element or the nearest element that creates a new formatting context (e.g. flex or grid containers).
- If the height of the containing block is not specified explicitly, the value computes to
auto.
Now, I'm no expert on browser implementations, but I would expect that the discrepancy arises from how Chrome vs Firefox interprets the word "explicitly." In messing around with your CSS, I found that if I applied enough hard-coded pixel dimensions in the hierarchy, the extra spacing would disappear on both Chrome and Firefox. But, of course, all of that hard-coding leads to unmaintainable stylesheets.
As an alternative, I found that applying display: contents as described above seemed to resolve the issue in a fairly unintrusive manner. See the snippet below. You can probably remove some more styles that have been made unnecessary by this change, but I only made the essential modifications.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 899px;
height: 500px;
padding: 1rem;
gap: 0.5rem;
display: flex;
flex-direction: column;
background-color: #303030;
}
.card {
height: 100%;
width: 100%;
background-color: #202020;
border-radius: 10px;
overflow: hidden;
}
.section-heading {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: uppercase;
}
.section-heading>h2 {
font-weight: 500;
letter-spacing: 1px;
font-size: 1rem;
}
.section-heading a {
text-decoration: none;
transition: 0.1s all linear;
}
.section-heading>a {
font-size: 0.8rem;
letter-spacing: 1px;
font-weight: 500;
}
.section-heading a:hover {
color: var(--theming);
}
.trending.card {
display: flex;
position: relative;
padding: 1rem;
gap: 0.5rem;
}
.cover-container {
overflow: hidden;
display: flex;
justify-content: center;
background-size: cover;
background-position: center;
transition: 0.1s all linear;
background-color: red;
}
.cover-container .cover:hover {
filter: brightness(0.7);
}
.cover {
width: 100%;
background-color: var(--same-background);
opacity: 0;
transition: 0.2s all linear;
}
.title a {
text-decoration: none;
transition: 0.1s all linear;
}
.title a:hover {
color: var(--theming);
}
.genres {
display: flex;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
flex-shrink: 0;
}
.genre {
padding: 0.1rem 0.5rem;
text-decoration: none;
border-radius: 5px;
background-color: #404040;
transition: 0.1s all linear;
color: var(--secondary-color);
}
.genre:hover {
background-color: var(--primary-background);
}
.genre:active {
background-color: var(--lighter-background);
}
.trending.banner {
height: 30%;
width: 100%;
background-color: var(--same-background);
position: absolute;
align-self: flex-start;
z-index: 0;
background-size: cover;
background-position: center;
filter: brightness(0.5);
overflow: hidden;
top: 0;
left: 0;
transition: 0.2s all linear;
}
.trending.cover-container {
display: contents;
height: 100%;
width: max-content;
max-width: 40%;
flex-shrink: 0;
}
.trending.manga.cover {
border-radius: 10px;
z-index: 3;
height: 100%;
width: auto;
}
.trending.info {
width: 100%;
height: 71%;
align-self: flex-end;
padding: 0.5rem;
gap: 0.1rem;
display: flex;
flex-direction: column;
}
.trending.title {
font-weight: 500;
font-size: 1.5rem;
flex-shrink: 0;
}
.trending.description {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 6;
flex-shrink: 0;
color: var(--secondary-color);
}
.trending.actions {
height: 100%;
width: 100%;
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
.trending.action {
height: 2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
background-color: var(--same-background);
border-radius: 5px;
border: none;
transition: 0.1s all linear;
cursor: pointer;
color: var(--secondary-color);
}
.nav {
width: 2.5rem !important;
}
.nav-icon {
height: 100%;
}
.nav-icon path {
stroke: var(--secondary-color);
stroke-width: 1.5;
}
.trending.action:hover {
background-color: var(--primary-background);
}
.trending.action:active {
background-color: var(--lighter-background);
}
<!-- language: lang-html -->
<div class="trending container">
<div class="trending section-heading">
<h2><a href="#">Trending Now</a></h2>
<a href="#">View All</a>
</div>
<div class="trending card" id="1">
<div class="trending banner">
<img src="//dummyimage.com/1500x500" alt="" class="trending cover" loading="lazy" style="opacity: 1;">
</div>
<a href="/manga/117195" class="trending cover-container">
<img src="//dummyimage.com/300x450" alt="" class="trending manga cover" loading="lazy" style="opacity: 1;">
</a>
<div class="trending info">
<h3 class="trending title"><a href="/manga/117195">[Oshi no Ko]</a></h3>
<div class="genres">
<a href="/search/manga/Drama" class="trending genre">Drama</a>
<a href="/search/manga/Mystery" class="trending genre">Mystery</a>
<a href="/search/manga/Psychological" class="trending genre">Psychological</a>
<a href="/search/manga/Supernatural" class="trending genre">Supernatural</a>
</div>
<p class="trending description">Gorou is a gynecologist and idol fan who’s in shock after his favorite star, Ai, announces an impromptu hiatus. Little does Gorou realize that he’s about to forge a bond with her that defies all common sense! Lies are an idol’s weapon! (Source:
Yen Press)</p>
<div class="trending actions">
<a href="/manga/117195/read" class="trending action read">Read this Manga</a>
<button class="trending action nav previous">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Arrow / Arrow_Right_SM">
<path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</button>
<button class="trending action nav next">
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<g id="Arrow / Arrow_Right_SM">
<path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论