I can't adjust the size of an image. I have tried by giving both width:150px and also width:150% instead of width:150px. it doesn't make sense

Issue

---

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=">

Solution

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

Answered By - ethry