即使屏幕变小，如何保持整个图像大小答案

【问题标题】：How to keep the whole image size even when screen gets smaller即使屏幕变小，如何保持整个图像大小
【发布时间】：2019-11-29 19:36:14
【问题描述】：

所以几天来我一直无法解决我的问题，让我解释一下，例如，我下载了一个 instagram 帖子 (png) 或 (jpg)，然后将其添加到我的 css 并添加背景尺寸：封面；正如我将在代码中显示的那样，但我很确定这会导致问题，因为当屏幕变小或仅在 1920 x 1080 分辨率的默认 PC 视图中并且未完全显示时，通常会切断某些图像。我的目标是让它显示整个图像，而不仅仅是其中的一部分。

这是我的html

<div class = "ideas-grid">
<!--Idea grid item 10-->
      <a href="https://www.instagram.com/p/andherewouldbethelinktothepost" target="_blank">
         <div class="idea-grid-item number-10">
         </div>
      </a>
</div>

我有锚链接，所以当他们按下“图片”时，它会将他们发送到链接这是我的CSS：

.number-10{
    background: url(../images/izaellelovely.jpg);
    background-size: cover;
}

.ideas-grid a{
    transition: 600ms;
}

.ideas-grid a:hover{
    background-color: #eb648c;
}

那么我又该如何做到这一点，以便在没有屏幕尺寸的情况下，图像不会被截断以适应网格或锚标签的尺寸（我的意思是当屏幕很小或有时更大时，即使想法网格框或锚标签的大小可以变大以适应整个图像它保持一定大小然后显然图像是为了覆盖所以它只是覆盖它必须的）大小而是显示完整里面的图片

【问题讨论】：

这能回答你的问题吗？ Responsive css background images

标签： html css

【解决方案1】：

您可以使用 min-width 属性并将其设置为您认为应该显示的最小值

    min-width:10%;

【讨论】：

【解决方案2】：

简短的回答：你不能。如果您希望图像随视口缩放并具有background-size: cover，则视口的尺寸不会总是与图像的尺寸匹配，因此一些外部图像会被截断。您可以将background-position: bottom 设置为始终显示图像的底部，并裁剪掉更多的顶部：

html,body{height:100%}

.ideas-grid {
    width: 80%;
    height: 80%;
}

.number-10 {
  background-image: url(https://placekitten.com/350/350);
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: bottom;
}

.ideas-grid a {
  transition: 600ms;
}

.ideas-grid a:hover {
  background-color: #eb648c;
}

<div class="ideas-grid">
  <!--Idea grid item 10-->
  <a href="https://www.instagram.com/p/andherewouldbethelinktothepost" target="_blank">
    <div class="idea-grid-item number-10"></div>
  </a>
</div>

【讨论】：

那么我如何才能让它工作以显示完整图像，那么我是否必须设置高度和宽度？还是有更好的解决方案
要么设置高度和宽度，要么使用background-size: contain

【解决方案3】：

你必须为图片使用 CSS 吗？如果你只想展示一张图片，为什么不使用这样的 img 标签呢？

.idea-grid-item {
  width: 100%;
  height: auto;
}

.ideas-grid a{
    transition: 600ms;
}

.ideas-grid a:hover{
    background-color: #eb648c;
}

<div class = "ideas-grid">
<!--Idea grid item 10-->
      <a href="https://www.instagram.com/p/andherewouldbethelinktothepost" target="_blank">
         <img class="idea-grid-item number-10"   src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Nara_Park%2C_November_2016.jpg/1280px-Nara_Park%2C_November_2016.jpg">
      </a>
</div>

【讨论】：