图像高度与宽度相同

Posted 2023-03-06

【中文标题】图像高度与宽度相同

【英文标题】：Image height same as width

【发布时间】：2018-12-29 01:08:45

【问题描述】：

我有一个容器内的图像，我希望它是一个完美的正方形。我将我的宽度设置为容器的 100%，目标是使图像的 height 与宽度相同，因为我不知道由于响应式设计容器的大小.

有什么想法吗？我正在使用 sass，如果有帮助的话..

.container 
width: 50%;


.container img 
  width: 100%;
  height: 400px; //this should be the same as the width value..

<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>

最好没有 javascript 解决方案，但也许没有其他办法？

【问题讨论】：

Height equal to dynamic width (CSS fluid layout)的可能重复

我认为没有纯css解决方案

css height same as width的可能重复

@mr.void 有一个 css 解决方案。出售所有已发布的链接。

@HereticMonkey 我认为作者需要将图像（任何纵横比）放入响应式正方形中。如您所见，在他的示例中，图像不是正方形。

【参考方案1】：

我们中的许多人在 cmets 中给了你一些提示，所以现在你应该能够创建一个响应式正方形。

---

使图片适合正方形

以防万一您遗漏了最后一部分，以下是您如何将图像（具有任何宽高比）放入该正方形中。这也意味着如果您的图像不是方形的，它将被裁剪。

片段：

.container 
  position: relative;
  width: 37%; /* The size you want */

.container:after 
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */


.container img 
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

【讨论】：

如果这确实是重复的，你可能不应该回答它......

@HereticMonkey 我知道，但我在广场内找不到图像的答案。我读过的所有答案都只是在谈论广场的创建。如果我找到一张有图片的，我会删除答案

@AmauryHanser：太棒了！我节省了很多时间！非常感谢！

@AmauryHanser 非常感谢这个解决方案，帮了我很多

这实际上解决了我的问题。不要删除这篇文章。

【参考方案2】：

如果您愿意使用背景图片，那么此解决方案将有效https://codepen.io/anon/pen/jpyrwB。

这将保持一个正方形比例并使图像覆盖整个 div。如果图像比高度宽，它还将使图像居中并裁剪侧面。

HTML

<div class='square-box'>
    <div class='square-content'></div>
</div>

CSS

.square-box
    position: relative;
    width: 50%;
    overflow: hidden;

.square-box:before
    content: "";
    display: block;
    padding-top: 100%;

.square-content
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;

【参考方案3】：

将此添加到样式文件的顶部：

    :root
  --size: 100px;

然后将定义的变量同时赋予宽度和高度：

width: var(--size);
height: var(--size);

【参考方案4】：

另一个技巧是使用图像本身作为自己的背景，然后应用高度为 0 的垂直填充方法。

下面的演示（带有虚拟图像，你的不显示给我）

.container 
  width: 50%;


.container img 
  width: 100%;
  height: 0px;/* padding will mage sizing here */
  padding: 50% 0;/* make it a square = 100% vertical padding , none horizontal*/
  background-image: url(http://dummyimage.com/750x1260/951&text=My_BG_Image);/* used a different color from the one in the tag */
  background-size: 100% 100%;
  /* reset just in case */
  background-clip: border-box;
  box-sizing:border-box;

<div class="container"><img src="http://dummyimage.com/750x1260/159&text=My_Image" /></div>

注意，我还使用了您的图片大小，它也不是正方形。你也介意拉伸吗？

【参考方案5】：

也许这对你有用？

.container img 
 width: 100%;
 padding-bottom: 100%;

【讨论】：

这仅适用于具有背景颜色或背景图像的标签，不适用于 标签