wordpress - Landscape and portrait image sizes within css -


what best css display category images not squashed or display distorted.

the images 1024 x 768 , wordpress/woocommerce settings being set @ 400 x 400 thumbnail , after regeneration of thumbnails there still same:

live link

i can change css not html.

css:

ul.products li.product .img-wrap {   position: relative;   margin: 0 0 1em;   padding: 3px;   background: #fff;   border: 1px solid #e1e1e1;   height: 150px;   width: 150px; }    ul.products li.product img {     float: none;     margin-right: 0;     width: 100%;   } 

one possible fix might be:

ul.products li.product img {     float: none;     width: auto;     margin: 0 auto; } 

this work portrait style thumbnails, not sure landscape style.

what want here have thumbnails fit in 150x150 box regardless of aspect ratio of thumbnail image.

on line 534 of woocommerce.css, following declaration:

ul.products li.product img {     display: block;     height: 150px;     width: 150px; } 

i remove height/width values or set them auto. allow images scale fit parent container.

wordpress using media queries, css setting width/height on img in more 1 place. example, see style near line 1968:

ul.products li.product img {     float: none;     margin-right: 0px;     width: auto;     margin: 0 auto;     max-height: 150px;     max-width: 150px; }  

Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -