Disproportionate image in higher resolution, I want help to create a way to make in each resolution proportional

Asked

Viewed 28 times

1

Well I am developing a very simple project more as I have no knowledge of the keywords I have difficulties with very simple problems.... i am making a mp3 player whose image this if stretching in resolutions... and I know this is to happen more I want the image in larger resolutions stay static in the center so as not to lose quality and not cut off parts of it...

i am not yet a "programmer" so I accept tips on how to optimize and improve my project

repository link = https://github.com/Luiz-insert/Playermp3

project link = https://youthful-bhabha-51291f.netlify.app/

Codes below for those who did not open the repository

index code.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SoundTrack</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="player">
      <h4><i class="material-icons">blur_on</i> SafeZØNE</h4>
      <div class="card">
        <div class="card-image"></div>
        <div class="card-content">
          <h5>Title</h5>
          <p class="artist">Artist</p>
          <audio controls></audio>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

style code.css

@import "https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";

body {
height: 100vh;
background-color: rgb(37, 35, 35);
display: flex;
align-items: center;
justify-content: center;
}

#player {
background-color: rgb(214, 200, 213);
width: 90%;
max-width: 375;
box-shadow:rgb(83, 18, 126) 0px 0px 25px 7px  ;
}

.card{
box-shadow:0;
margin:0;
}

h4 {
color: rgb(83, 18, 126);
font-size: 20pt;
font-weight: bold;
margin: 0;
align-items: center;
justify-content: center;
padding: 10px;  
}

.card-image {

background:url("https://i.scdn.co/image/ab67616d00001e02e08bd6e8f24653f315c23520") no-repeat center center /cover;
height:200px ;
padding: 10px;
flex: auto;
align-self: flex-start;
}
audio {

margin-top: 10px;
width: 100%;


}

index js code.

const cover = document.querySelector(".card-image");
const title = document.querySelector(".card-content h5");
const artist = document.querySelector(".artist");
const audio = document.querySelector("audio");

const data = { 

  title: "Мама спалила",
  artist: "Tenderlybae",
  cover: "https://i.scdn.co/image/ab67616d00001e02e08bd6e8f24653f315c23520",
  file: "x3.mp3",
}

cover.style.background = `url('${data.cover}') no-repeat center center / cover`;
title.innerText = data.title;
artist.innerText = data.artist;
audio.src = data.file;

data code js.

window.audios = [
  {
    title:
      "Musica 01",
    artist: "Artista",
    cover: "https://i.scdn.co/image/ab67616d00001e02e08bd6e8f24653f315c23520",
    file: "x3.mp3"
  }
  
]

Image I’m referring to and using https://i.scdn.co/image/ab67616d00001e02e08bd6e8f24653f315c23520

javascript html css

1 answer

0

The ideal would be you take the resolution of the user screen and adjust to the ideal size for each screen, you can take javascript, but I’ll give an example in css:

@media screen and (max-width: 770px) {
 img{
    width:''; //largura em pixel ou porcentagem
    height:''; //largura em pixel
}
}

What I’m saying to the css in the above comic is "If the screen has at most 770px use this image size", However it has many different screen sizes and so it is good you take the screen dimension in javascript and handle the size javascript too, because in css it would become tiresome for you to have to make various configurations of this type for various sizes of it different to make the site responsive. I only used this example in css because it is also valid, now in javascript it would be good for you to create a function to do this :)

  • is my first time using stack overflow so excuse me if I put too much into a simple answer...

  • most obg by the tips

  • Do not relax kkk, a question has to be like this, clear!! Until it is good for a new user :)

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.