CODEWITHSUNDEEP
htmlcssimageimage-resizing
Mert Nuhoglu
Mert Nuhoglu

Reputation: 10143

Why do images get resized?

I am using a wordpress theme in my web site kilovat.co. There I put 90x90 px images.

But the images get scaled up to 284x284 px as seen here

enter image description here

I don't want the images to get resized. I guess some css styling makes this resizing. But I couldn't find which one. How can I let the images stay as they are?

Upvotes: 1

Views: 134

Answers (2)

Michal Klouda
Michal Klouda

Reputation: 14521

When you inspect your element using Chrome, you will see this computed style:

width: 283.6166687011719px;

Pointing to slideshow.css, line 132, which overrides your inline style:

#top .slideshow li img - 100%

Upvotes: 0

ronalchn
ronalchn

Reputation: 12335

The problem is here at line 133 of slideshow.css:

#top .slideshow li img{
  width: 100%; /* this line affects image size */
  height:auto;
  position: relative;
  z-index: 3;
  border:none;
  margin:0;
  padding:0;
  display:block;
}

You can easily debug this in a browser.

I use Chrome, but it should be very similar with Firefox. When I browse to the page, I right click the image, and select "Inspect element". This will open a pane with a large amount of information.

On the right hand side, there is a section "Matched CSS Rules", showing the above CSS information, as well as the filename and line-number where it is defined. Additionally a number of check-boxes allow me to disable any rule I want. By disabling the width: 100% rule, I can easily confirm that the width: 100% line is the problem.

Upvotes: 4

Related Questions