Question

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

But the images get scaled up to 284×284 px as seen 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?

Answer 1

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.