Thumbnail / Zoom / Layout Problem

Hello, I’ve started new site (vevegames.com) and have a thumbnail problem. I want imaged to be wide:240px/height:140px. I’ve set this but when zooming they change size and height is bigger than width. Also quality of pics is too low and only after full zoom in and out they show their original quality.

I found other site with same template: fishinggames.us. You’ll see when zoom in they don’t change. I want exactly the same thing.

Here is the css of this module:

.td-module-4-wrap {
	margin-bottom: 45px;
	overflow: hidden;
}

.td-module-4-wrap img.wp-post-image {
	display: inline-block;
}

.col-1116 .td-module-4-wrap .col-146{
	width: 10%;
	margin-bottom: 0.6868131868131868%;
	margin-right: 0;
}

.col-1116 .td-module-4-wrap .col-146:before {
	width: 6%;
}

.col-1116 .td-module-4-wrap img.wp-post-image {
	width: 110px;
}

.col-728 .td-module-4-wrap .col-146 {
	width: 14.28571428571429%;
	margin-bottom: 0.6868131868131868%;
	margin-right: 0;
}

.td-module-4-wrap .col-146:before {
	content: "";
	position: absolute;
	width: 5px;
	height: 100%;
	background: #fff;
}

.td-module-4-wrap .grid-image {
	position:relative;
	display:inline-block;
	float:left;
	-moz-transition: all .3s ease 0s;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all 0.3s ease 0s;
}

.td-module-4-wrap .grid-image:hover {
	opacity:0.8;
}

.td-module-4-wrap .td-friv.grid-image {
	position:relative;
	display:inline-block;
	float:left;
}

.td-module-4-wrap .td-friv.grid-image img {
	cursor: url(../images/cursors/cursor13.png), pointer;
}

And I changed this:

.td-module-4-wrap img.wp-post-image {
    width: 240px;
    max-height:140px;
}

.col-1116 .td-module-4-wrap img.wp-post-image {
    width: 240px;
    max-height: 140px;
}

.col-1116 .td-module-4-wrap .col-146 {
    width: 20%;
}

Thanks in advance!

The problem is you are displaying the images at a size larger than the images native size. This means that even at normal size, with no zoom, the image is blown up and becomes blurry.
You need a higher resolution source image, at the very least the size the image appears on the page.
To be clear on high density (retina) screens, it will need to be more. See this recent topic:-

2 Likes

Thank you for your answer but I think this case something different. I do use high resolution pictures.


Look at this pic, that’s my site and if I change “natural size” 104 X 104 pixel to higher, pictures will not be blurry but can’t find where is it to change. It’s not in css.

Trying to solve this all day&night long.
Hope for your help.
Thanks.

This is in native size of the image file. You cannot increase that via css. You actually need a larger source file to begin with.

I don’t consider 104px to be high resolution.
Blowing up the images in an image editing program won’t work well, it will still be blurry.
so you either aquire the images in better resolution, or use css or img attributes to display them smaller, or no larger than the native size.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.