如何在屏幕变小的情况下保持整个图像的尺寸

Question

所以现在有几天我无法解决我的问题，让我解释一下，比如，我下载了一个instagram post (png)或(jpg)，然后将它添加到我的css中，并添加了background-size: cover；，正如我将在代码中显示的那样，但我非常确定这是导致问题的原因，因为当屏幕变小或仅在默认的1920x1080分辨率的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;
}

那么，我如何让图像在没有屏幕大小的情况下不被截断，以适应网格或锚标签的大小(我的意思是，当屏幕小或有时更大时，即使是想法网格框或锚标签的大小，也可以变大以适应整个图像，它保持一定的大小，然后很明显，图像被设计为覆盖它必须覆盖的内容)，而是在其中显示完整的图像

Answer 1

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

    min-width:10%;

Answer 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>

​

Answer 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>

​