How to keep the whole image size even when screen gets smaller

Question

So for a few days now I haven't been able to solve my problem, let me explain, so for example, I download an instagram post (png) or (jpg) and then add it to my css and add the background-size: cover; as I will show in the code but then I'm pretty sure that causes the problem because then some images are usually cut off when the screen is made smaller or just in the default pc view of 1920 x 1080 resolution and are not shown fully. I am aiming to make it so that the whole image is shown not just some of it.

here is my 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>

I have the anchor link so that when they press on 'the image' it sends them to the link here is my css:

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

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

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

So again how do i make it so that at no screen size the image is not cutoff to fit the size of the grid or the anchor tag( what i mean by this is that when the screen is small or sometimes bigger even though the size of the ideas-grid box or the anchor tag one could go bigger to fit the whole image it stays a certain size and then obviously the image is made to cover so it just covers what it has to) size but instead show the full image in it

Does this answer your question? [Responsive css background images](https://stackoverflow.com/questions/12609110/responsive-css-background-images) — AndrewL64, Nov 29 '19 at 19:41

score 0 · Answer 1 · answered Nov 29 '19 at 19:41

0

You could use min-width property and set it to a low minimum value you think it should show as it is

    min-width:10%;

answered Nov 29 '19 at 19:41

Himanshu

3,830
2
10
29

score 0 · Answer 2 · answered Nov 29 '19 at 19:49

Short answer: you can't. If you want an image to scale with the viewport and to have a background-size: cover then the dimensions of the viewport will not always match the dimensions of the image, so some of the outer image will get cut off. What you can do is set background-position: bottom to always show the bottom of the image, and crop out more of the top instead:

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>

so how will I be able to make it work so that it shows the full image, do i have to set a height and width then? or is there a better solution — KrapnixTheFootballer, Nov 29 '19 at 19:54
Either set the height and width or use `background-size: contain` — symlink, Nov 29 '19 at 20:01

score 0 · Answer 3 · answered Nov 29 '19 at 20:03

Do you have to use CSS for the image? If all you're trying to do is show an image, why not use an img tag like this?

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

How to keep the whole image size even when screen gets smaller

3 Answers3