Why can I only change the height and not the width of an image in HTML?-CodePudding

I'm trying to get an image of a player from the premier league's resources, then display that on a web page. The images can be found using the link https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png. The 178186 is a code unique to a player and I can change that using jinja and the premier league api. So, I get the image on my page, but I can't change its width, only its height. I have tried declaring it when making the image in HTML:

<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" width="220">

I have also tried creating a class and then using css change the width:

<div >
                    <img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" height="280">
                  </div>

.playerimage {
    max-width: 220px;
    min-width: 219px;
    width: 220px;
    height: 280px;
}

Website showing the image appears, with the height altered to 280px, but no change in width

CodePudding user response：

Select the img tag with css instead of the div with .playerimage, so this worked for me:

HTML

<div >
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png" height="280">
</div>

CSS

.playerimage img {
    height: 280px;
    width: 10px;  
}

CodePudding user response：

Im pretty sure the problem is the width="220" attribute in the <img>-tag. If you remove this you should be fine and can change the height, width however you want and need to.

try this instead:

<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png">