Image width and height re-sized in main-content area [#1902360]

Hi there,

I added an image in the main-content area and the image was quite badly distorted. Further investigation revealed the following in the style.css file:
#main-content .node img {
float: left;
width: 48%;
height: 235px;
padding: 5px;
background: #ffffff;
margin:0 30px 24px 0;
border: 1px solid #DDD;

-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}

You can see from above that img width is being set to 48% and img height is being set to 235px.

I was just wondering why that is being done as it distorts the image display.

Many thanks.

Comments

Comment #1

skech CreditAttribution: skech commented 30 January 2013 at 22:02

Hi jussiep, good point..

You can do the following changes into the corkedscrewer/css/style.css file and your images will be resized and not distorted

line 822 style.css

#main-content .node img { 
    float: left; 
++ max-width: 48%; 
++ width: 100%; 
-- width: 48%;
-- height: 235px;
++ height: auto; 
   padding: 5px; 
   background: #ffffff; 
   margin:0 30px 24px 0; 
   border: 1px solid #DDD; 
 
   -webkit-transition: 0.3s all; 
   -moz-transition: 0.3s all; 
   -ms-transition: 0.3s all; 
   -o-transition: 0.3s all; 
   transition: 0.3s all; 
}

line 1569 style.css

#main-content .node img { 
   width: 100%; 
++ max-width: 100%; 
   height: auto; 
}

Thanks
Soukri

Comment #2

cindyr CreditAttribution: cindyr commented 11 February 2013 at 03:13

FYI, adding width: 100% caused it to continue to remain the original size of the image, even though the content type display setting had been changed to display the thumbnail. Removing the width: 100% and height: auto elements fixed it for me.

Comment #3

gtsopour CreditAttribution: gtsopour commented 9 March 2013 at 14:36

Assigned:	Unassigned	» skech
Category:	support	» bug
Priority:	Normal	» Major

Hello skechagia,

just remove the custom width/height definitions and keep only the max-width. In this way, every user will have the option to apply the desired image style through Drupal's User Interface.

Thanks
George