CSS图像，对象大小:包含，边距:自动和百分比

Question

我正在寻找这个css代码的替代方案，它在chrome上按预期工作，但在firefox上不工作。

当视口大小不同时，接点不会保持其位置。你可以在chrome上调整jsfiddle上的视口大小(高度和宽度(，看看我想要什么，在firefox上看看我不想要什么。我想在margin(自动(和object fit(对象拟合(之间有某种区别：contain(包含(的计算方式不同。。。

来自devtools的Chrome余量Firefox从devtools 的利润

我知道我可以用javascript做这件事，但我想知道用css是否可行！

<div class="site">
<div class="wrapper">
<div class="title">TITLE</div>
<div class="subtitle">Subtitle</div>
<div class="container">
<div class="img-wrapper">
<img src="./img.jpg" alt="">
</div>
<div class="pin-container">
<div class="pin pin1">?</div>
<div class="pin pin2">?</div>
<div class="pin pin3">?</div>
<div class="pin pin4">?</div>
</div>
</div>
</div>
</div>

.site{
position: relative;
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 960px;
border: 1px solid blue;
}
.wrapper{
display: flex;
flex-direction: column;
}
.container{
position: relative;
border-radius: 6px;
margin: auto;
}
.img-wrapper{
height: 100%;
}
.img-wrapper img{
width: 100%;
height: 100%;
object-fit: contain;
}
.pin-container{
position: absolute;
color: red;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pin{
position: absolute;
background-color: white;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.pin1 {
top: 50%;
left: 24%;
}
.pin2 {
top: 30%;
left: 52%;
}
.pin3 {
top: 87%;
left: 79%;
}
.pin4 {
top: 100%;
left: 100%;
}

https://jsfiddle.net/MathieuSP/8u3gLz4q/

谢谢！：(

Answer 1

我认为这是因为.wrapper中的display: flex。

柔性盒子本身会始终将内容放在里面，这样它就会缩小或放大图像。

您可以使用flex: 1来防止图像发生更改(您可以在此处阅读更多信息(，并设置aspect-ratio来保持图像的宽度和高度一致。只需在.container中设置即可

.container {
position: relative;
border-radius: 6px;
margin: auto;
flex: 1;
aspect-ratio: 1.5;
}

这是片段，希望能对你有所帮助

* {
margin: 0;
overflow: hidden;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100vw;
color: white;
background-color: black;
}
.title{
text-align: center;
padding: 2rem 0;
font-size: 2rem;
}
.subtitle{
text-align: center;
padding: 1rem 0;
font-size: 1rem;
}
.site{
position: relative;
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 960px;
border: 1px solid blue;
}
.wrapper{
display: flex;
flex-direction: column;
}
.container{
position: relative;
border-radius: 6px;
margin: auto;
flex: 1;
aspect-ratio: 1.5;
}
.img-wrapper{
height: 100%;
}
.img-wrapper img{
width: 100%;
height: 100%;
object-fit: contain;
}
.pin-container{
position: absolute;
color: red;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pin{
position: absolute;
background-color: white;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
.pin1 {
top: 50%;
left: 24%;
}
.pin2 {
top: 30%;
left: 52%;
}
.pin3 {
top: 87%;
left: 79%;
}
.pin4 {
top: 100%;
left: 100%;
}

<div class="site">
<div class="wrapper">
<div class="title">TITLE</div>
<div class="subtitle">Subtitle</div>
<div class="container">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/1534057/pexels-photo-1534057.jpeg" alt="">
<div class="pin-container">
<div class="pin pin1">?</div>
<div class="pin pin2">?</div>
<div class="pin pin3">?</div>
<div class="pin pin4">?</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

它们移动是因为它们的container大小的变化大于picture。对于这种定位，始终将image和absolute elements与fit-content width and height放在一个容器中。当然还有relative position。如果你这样做，他们会呆在同一个地方。

* {
margin: 0;
overflow: hidden;
box-sizing: border-box;
}

body{
height: 100vh;
width: 100vw;
color: white;
background-color: black;
}

.title{
text-align: center;
padding: 2rem 0;
font-size: 2rem;
}

.subtitle{
text-align: center;
padding: 1rem 0;
font-size: 1rem;
}

.site{
position: relative;
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 960px;
border: 1px solid blue;
}

.wrapper{
display: flex;
flex-direction: column;
}

.container{
position: relative;
border-radius: 6px;
margin: auto;
}

.img-wrapper{
height: 100%;
}

.img-wrapper img{
width: 100%;
height: 100%;
object-fit: contain;
}

.pin-container{
position: absolute;
color: red;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid red;
}
.pos-container {
border: 3px solid orange;
position: relative;
width: fit-content;
height: fit-content;
}

.pin{
position: absolute;
background-color: white;
color: red;
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
transform: translate(-50%, -50%);
}

.pin1 {
top: 50%;
left: 24%;
}
.pin2 {
top: 30%;
left: 52%;
}
.pin3 {
top: 87%;
left: 79%;
}
.pin4 {
top: 100%;
left: 100%;
}

<body>
<div class="site">
<div class="wrapper">
<div class="title">TITLE</div>
<div class="subtitle">Subtitle</div>
<div class="container">
<div class="img-wrapper">
<div class="pos-container">
<img src="https://images.pexels.com/photos/1534057/pexels-photo-1534057.jpeg" alt="">
<div class="pin pin1">?</div>
<div class="pin pin2">?</div>
<div class="pin pin3">?</div>
<div class="pin pin4">?</div>
</div>
</div>
</div>
</div>
</div>
</body>