I can't adjust the size of an image. I have tried by giving both width:150px and also width:150-CodePudding

This is my code css code.

    img[src="https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY"]{
width:250px;
}

This is my html code

      <img  src="https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY=">

CodePudding user response：

Your selector is different to the actual src. The code below fixes this problem and has the exact src.

The difference was that you appended an unnecessary = to the selector in CSS.

img[src="https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY="] {
  width: 250px;
}

<img src="https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY=">

A better way would be to use .classes {} or #ids {} though.

More information about attribute selectors: MDN

More information about: Classes - MDN IDs - MDN

CodePudding user response：

I can't really replicate your problem with the given code. Share relevant code to your specific situation. HTML and CSS.

Also, for images use img tag and use id only as a selector for specific items, instead of a replicable one as just #image

CodePudding user response：

CSS code

#image-1{
    width:250px;
}

HTML code

<img src="https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY=">

Try This