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

Question

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

这是我的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>

我有 anchor 链接，这样当他们按下“图像”时，它会将他们发送到链接这是我的 CSS:

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

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

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

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

Answer 1

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

    min-width:10%;