css 样式div检索与内部图像相同的尺寸

qni6mghb 于 2023-01-03 发布在其他

关注(0)|答案(4)|浏览(140)

- bounty将在5天后过期**。回答此问题可获得+50声望奖励。Jojomatik希望引起更多人关注此问题。

我需要放置一个div（或按钮），使其与包含的图像具有相同的尺寸。
同时，图像和div（.zoom）不能超过父div的尺寸。
水平图像的aqua div大于图像本身。
我已经尝试了相当多，但我不能让它的工作，以及垂直和水平的形象。
如果我把水平图像的框弄对了，垂直图像就会溢出到底部。
上下文：我无法控制图像本身（可能有各种宽高比和大小）和最外部的div（由用户的窗口大小控制）。

function log() {
  console.log("Click!");
}

.container {
  height: 100%;
  width: 50%;
  display: block;
  padding: 0;
  background-color: lightgreen;
}

.zoom {
  display: block;
  max-height: max-content;
  max-width: max-content;
  height: 100%;
  width: 100%;
  margin: auto;
  background-color: aqua;
}

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

<div style="height: 500px; display: flex; flex-direction: row; overflow: scroll; background-color: lightgray">
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG" />
    </div>
  </div>
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Eiffel_tower_at_dawn_horizontal.jpg" />
    </div>
  </div>
</div>

预期结果：
我有两张碟（.container，绿色）和（.zoom，浅绿色）。容器大小基于用户窗口大小，不是固定的。缩放包含图像，其应当使用与.container一样多的面积（保持高宽比）并应居中。根据图像的高宽比，这要么给图片的两侧或顶部和底部留下空间。我需要得到.zoom的大小，以完全匹配的图像大小作为一个事件处理程序绑定到。
绿色区域显示.container，而浅绿色区域显示两个图像中的一个（在示例中，一个纵向，一个横向）。.zoom的尺寸和位置应该与此图像匹配。

css

来源：https://stackoverflow.com/questions/74952583/style-div-to-retrieve-same-dimensions-as-image-inside

4条答案

按热度按时间

juzqafwq1#

let button = document.querySelector("button");
let imgs = document.querySelectorAll("img");

button.addEventListener("click", function (evt) {
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.toggle("hidden");
  }
});

div{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  outline: 1px dashed blue;
  height: 100vh;
  width: 100%;
}
img{
  max-width: 100%;
  width: auto;
  max-height: 100%;
  height: auto;
  flex: 1 1 auto;
}
.hidden{
  display:none;
}

<button>switch</button>
<div>
<img src="https://www.adobe.com/content/dam/cc/us/en/creative-cloud/photography/discover/landscape-photography/CODERED_B1_landscape_P2d_714x348.jpg.img.jpg" alt="pic1">

<img src="https://m.media-amazon.com/images/I/61WYsP5qScL.jpg" alt="pic1" class="hidden">

</div>

赞(0）回复(0）举报 2023-01-03

0h4hbjxa2#

我已经有了一个使用display: flex的大部分工作的例子，也许有人可以找出最后一个问题并编辑代码：

function log() {
 console.log("Click!");
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 50%;
  padding: 0;
  background-color: lightgreen;
}

.zoom {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
 
  background-color: aqua;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<div style="height: 300px; display: flex; flex-direction: row; overflow: scroll; background-color: lightgray">
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Eiffel_Tower_Vertical.JPG" />
    </div>
  </div>
  <div class="container">
    <div class="zoom" onclick="log()">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Eiffel_tower_at_dawn_horizontal.jpg" />
    </div>
  </div>
</div>

一个遗留的问题是.zoom-div在底部有一个不需要的填充量，我似乎无法摆脱。这不是太糟糕，可能会为我的用例工作，但如果有人能帮助修复这将是非常好的!

赞(0）回复(0）举报 2023-01-03

0lvr5msh3#

这可能是一个在CSS中使用background-image的好机会! CSS中有很多字段，如background-image，background-repeat，background-size，background-position，它们都可以用来帮助我们在框中使用图像。唯一的区别是，如果我们想在JS中将其替换掉，我们只需要为style.backgroundImage设置一个新值。
当您运行下面的代码段时，请尝试编辑picsum图像大小或background-properties的其他属性!

#img-container-wide {
  width: 200px;
  height: 100px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#img-container-tall {
  width: 100px;
  height: 200px;
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

<div id="img-container-wide"></div>
<div id="img-container-tall"></div>

赞(0）回复(0）举报 2023-01-03

7gyucuyw4#

使用flex的解决方案会导致浏览器窗口大小更改时图像在居中对齐和左对齐之间跳转，并且当可用空间大于图像宽度时，右图像永远不会居中（至少在Safari 16. 2中是这样）。就我对你问题的理解而言，它应该工作而不管窗口大小。下面的CSS将.zoom在.container内垂直和水平居中，同时使.zoom为图像的大小并保持图像'的宽高比，而不管窗口大小：

.outside-div {
  min-height: 100%;
  display: flex;
  flex-direction: row;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoom {
  height: fit-content;
  width: fit-content;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

由于您提到您不知道图像的实际大小，我添加了一些JS，用于检索演示中的随机大小图像：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-01-03

我来回答

css 样式div检索与内部图像相同的尺寸

4条答案

相关问题

热门标签

最新问答