英文:
Image positioning CSS issue
问题
I have created a small mockup of the issue here: https://codepen.io/rctneil/pen/PoBgZEe?editors=1100
What I wish to achieve is effectively to remove the space above and below the logo inside the dotted red outline.
I want to keep the logo in exactly the same place as it is (horizontally centered and vertically centered on the photo's bottom edge), but remove the space above and below. This should reduce the overall height of the card.
I do not know the dimensions nor aspect ratio of the logos ahead of time.
英文:
I have created a small mockup of the issue here: https://codepen.io/rctneil/pen/PoBgZEe?editors=1100
What I wish to achieve is effectively to remove the space above and below the logo inside the dotted red outline.
I want to keep the logo in exactly the same place as it is (horizontally centered and vertically centered on the photo's bottom edge), but remove the space above and below. This should reduce the overall height of the card.
I do not know the dimensions nor aspect ratio of the logos ahead of time.
Any ideas?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
p {
margin: 0;
}
html {
height: 100%;
display: grid;
place-items: center;
}
.card {
position: relative;
width: 200px;
border: 2px solid black;
}
.photo {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: -25%;
padding: 25%;
min-width: 100%;
pointer-events: none;
outline: 2px dotted red;
}
.logo img {
position: absolute;
display: block;
max-width: 50%;
max-height: 75%;
margin-top: 0;
padding: 0.2rem;
border-radius: 0.25rem;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .25);
background-color: #fff;
pointer-events: all;
}
.meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
text-align: center;
}
<!-- language: lang-html -->
<div class="card">
<img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
<div class="logo">
<img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
</div>
<div class="meta">
<p>Name here</p>
<p>Sub title here</p>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
以下是您提供的内容的中文翻译:
在花费了比我愿意承认的更多时间后,这个答案上的第一个评论指引我朝着我认为是唯一的纯CSS解决方法的方向前进。显然,在计算顶部填充和边距时,百分比值是从元素的宽度中获取的。据说获取高度的唯一方法是使用变换。
以下代码应该提供您所需的内容:
* {
box-sizing: border-box;
}
p {
margin: 0;
}
html {
height: 100%;
display: grid;
place-items: center;
}
.card {
position: relative;
width: 200px;
border: 2px solid black;
}
.photo {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-width: 100%;
pointer-events: none;
outline: 2px dotted red;
/* 这将使元素上移50%的总高度 */
transform: translateY(-50%);
}
.logo img {
display: block;
max-width: 50%;
margin-top: 0;
padding: 0.2rem;
border-radius: 0.25rem;
box-shadow: 0px 0px 3px 1px rgba(0,0,0,.25);
background-color: #fff;
pointer-events: all;
}
.meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
text-align: center;
}
<div class="card">
<img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
<div class="logo">
<img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
</div>
<div class="meta">
<p>这里放姓名</p>
<p>这里放副标题</p>
</div>
</div>
英文:
After spending more time on this than I would care to admit, the first comment on this answer pointed me in the direction of what I believe to be the only pure CSS way to solve your problem. Apparently, when calculating top padding and margin, percentage values are taken from the width of the element. Supposedly the only way to get the height is to use a transform.
The following code should provide what you need:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
p {
margin: 0;
}
html {
height: 100%;
display: grid;
place-items: center;
}
.card {
position: relative;
width: 200px;
border: 2px solid black;
}
.photo {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
position: relative;
min-width: 100%;
pointer-events: none;
outline: 2px dotted red;
/* This will slide the element up by 50% of it's total height */
transform: translateY(-50%);
}
.logo img {
display: block;
max-width: 50%;
margin-top: 0;
padding: 0.2rem;
border-radius: 0.25rem;
box-shadow: 0px 0px 3px 1px rgba(0,0,0,.25);
background-color: #fff;
pointer-events: all;
}
.meta {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
text-align: center;
}
<!-- language: lang-html -->
<div class="card">
<img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
<div class="logo">
<img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
</div>
<div class="meta">
<p>Name here</p>
<p>Sub title here</p>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
我采用了以下方法:我在红色轮廓的图像上设置了 aspect-ratio: 3/2;
,并在容器中使用 object-fit: contain;
来填充徽标,确保它遵守50%的宽度。
在演示中,我还包括了第二个带有较高高度图像的卡片,以查看不同尺寸徽标的效果。
transform: translateY(-50%);
是一个巧妙的技巧,如下面的答案中所指出的。缺点是它不会从DOM中移除空间,我添加了 margin-top: -1.9rem;
到 .meta
类以移除空间。
英文:
I took this approach where I set a aspect-ratio: 3/2;
to the image in the red outline and object-fit: contain;
to fill the logo inside container. Making sure it respects the width of 50%.
I included a second card in demo with an image that's taller in height to see effects of a different sized logo.
transform: translateY(-50%);
is a neat trick as pointed out by @Clint Warner in answer below. Drawback is that it doesn't remove space from the DOM and I added a margin-top: -1.9rem;
to the .meta
class to remove space.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
p {
margin: 0;
}
/* html {
height: 100%;
display: grid;
place-items: center;
} */
body {
display: grid;
justify-content: center;
grid-auto-flow: column;
gap: 1rem;
}
.card {
position: relative;
width: 200px;
border: 2px solid black;
}
.photo {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.logo {
display: flex;
justify-content: center;
outline: 2px dotted red;
transform: translateY(-50%);
}
.logo img {
width: 50%;
aspect-ratio: 3/2;
object-fit: contain;
padding: 0.2rem;
border-radius: 0.25rem;
background-color: #fff;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25);
pointer-events: all;
}
.meta {
margin-top: -1.9rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
text-align: center;
}
<!-- language: lang-html -->
<div class="card">
<img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
<div class="logo">
<img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/colossus-thorpe-park-resort-chertsey.png" />
</div>
<div class="meta">
<p>Name here</p>
<p>Sub title here</p>
</div>
</div>
<div class="card">
<img class="photo" src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" />
<div class="logo">
<!-- Photo with more height than width -->
<img src="https://neiltongesite.s3.us-west-001.backblazeb2.com/coasters/logos/batman-the-ride-six-flags-magic-mountain-valencia.png" />
</div>
<div class="meta">
<p>Name here</p>
<p>Sub title here</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论