CSS Cropping Landscape to Square

Question

I have spent the last 48 hours trying to do this and its driven me that insane that I have come to you guys on here before wasting anyones time.

I have viewed a number of posts on here with cropping landscape images to square but none seem to work for how the Joomla site I am working on is setup. Any help would be appreciated.

On this page here: http://www.kanzenint.com/sfront/index.php/product-page at the bottom of the page there is a module that has 4 images at the bottom.

The first image is the image which is used in each product listing, and in the main view the size will be landscape size, but in category and submodule view I want the image to be cropped to a square and it also needs to be responsive so when you resize it it will automatically adjust.

I was able to do it in pixels but not in %.

The native size of each thumb for categories and submodules is 375 x 250px at its full size but I wish it to be 250 x 250px and centered. And when its in responsive to be the same 1:1 square ratio.

Many thanks in advance for your help!

I am working on trying to replicate it but the best thing to do would be to look at the link as what I would create will most likely not be exactly the same I think as I will prob miss something :( — Ninjab, Aug 12 '14 at 13:37
@kmoe This fiddle based on the A tag being the parent and the IMG being the child here: http://jsfiddle.net/ninjab/0nhLoxd3/2/ — Ninjab, Aug 12 '14 at 14:05

score 0 · Answer 1 · answered Aug 12 '14 at 09:57

0

JSFIDDlE

css transform can help you here:

CSS WILL BE:

.image-holder {
    position: relative;
    width: 250px;
    border: 1px solid;
    overflow: hidden;
    height: 250px;
}
.image-holder img {
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto
}

HTML WILL BE:

<div class="image-holder">
    <img src="1920.jpg" />
</div>

answered Aug 12 '14 at 09:57

Husen

955
1
6
16

Thanks I will check that out tonight and see how I go. – Ninjab Aug 12 '14 at 10:59
I just gave it a try and doesnt seem to work :(. You can refresh the page link I provided to see how it looks with your code, provided I had done it correct. – Ninjab Aug 12 '14 at 11:37

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

To keep the 1:1 aspect ratio of the container, you may use padding (this technique is described here).

To center the image in the conatainer, you can use the absolute positioning technique with negative left/right values combined with width:auto; margin:auto;

To hide the overflow, use overflow:hidden;

DEMO

HTML :

<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>

CSS :

div{
    position:relative;
    width:22%;
    padding-bottom:22%;
    margin:1%;
    float:left;
    overflow:hidden;
}
img{
    position:absolute;
    height:100%; width:auto;
    top:0;left:-50%;right:-50%;
    margin:auto;
}

edited May 23 '17 at 12:29

Community

1
1

answered Aug 12 '14 at 10:00

web-tiki

99,765
32
217
249

Thanks, I will also check that out tonight. The issue I have been having is I have seen a few examples (on other peoples thread posts, not mine here) but the examples dont seem to work for me. So hopefully it will work. – Ninjab Aug 12 '14 at 11:02
Hi there, I did try your solution but doesnt seem to work. Perhaps I may need to change the PHP templating file? I basically disabled the rest of the CSS above it and I tried with your parent coding in both my Div and the A tag (tried it separately of course) below it which are both above the image. :( – Ninjab Aug 12 '14 at 11:19
@Ninjab I went on your site to have a look, hikashop tends to add a whole lot of CSS rules that you need to disable for the above technique to work. I usualy disable all hikashop CSS (inline styles too) and write my own but this involves more work. You can use a code inspector to identify the CSS rules to disable and add your own (You will need to edit the hikashop template files to remove the unwated inline CSS rules). – web-tiki Aug 12 '14 at 11:34
Thanks for the quick reply. My tempate is using the listing_image_title.php file for the sub modules, so I assume you mean to edit this file and remove the added inline element styles in the div tags? I dont mind doing more work, I just go insane trying to work out why its doing what its doing that Ive wasted two days just to try and get this to work in such a small thing hah. I did try disabling all CSS above it when I tried your method but didnt seem to work but I will go into the PHP file mentioned above and remove some of the stuff and try again. – Ninjab Aug 12 '14 at 11:47
The way how you have it in the DEMO you provided is perfect to what I want to do. – Ninjab Aug 12 '14 at 11:48
@Ninjab if you want it as the demo, you will need to disable all conflicting css rules. Add the CSS from the answer and use a code inspector to identify the conflicting rules you need to remove. – web-tiki Aug 12 '14 at 12:03
I removed the inline CSS elements that were in the template file of Hika and have put in the CSS and updated the page but still no luck. So there should be nothing conflicting with it as nothing is controlling it other than your code. You can see my page now and see. I tried putting different parents and children elements, and changing the padding values. Thanks for your help thus far. – Ninjab Aug 12 '14 at 13:05
I havent touched it for a while, thats just how it seems to look when its based on the parent being div.hikashop_product_image as the child being div.hikashop_product_image_subdiv I tried a few different combinations but dont seem to have any luck. I also created a fiddle based on the A tag being the parent and the IMG being the child here: http://jsfiddle.net/ninjab/0nhLoxd3/2/ – Ninjab Aug 12 '14 at 14:00
@Ninjab looked at your fiddle and you had a typo in the CSS with the classs name. check this : http://jsfiddle.net/webtiki/0nhLoxd3/3/ – web-tiki Aug 12 '14 at 14:06
Thanks for that. Can you advise where my typo was? I am thinking that I will also have a centering problem as it looks like its aligned to the left. I think the text on my page I have will be in the center but I will worry about that once I get the behaviour correct on the page first b4 wasting more of ure time which I am very thankful of. If you could let me know the typo that would be great. – Ninjab Aug 12 '14 at 14:32
@Ninjab the typo was in the class name, you had used `.hika_product_image` instead of `.hikashop_product_image` in the CSS. For the centering, you need to remove `float:left` on `.hikashop_product_image a` and add `margin:1% auto;` check here : http://jsfiddle.net/webtiki/0nhLoxd3/5/ – web-tiki Aug 12 '14 at 14:37
Yep I saw that update already :) Many thanks. I had to make some adjustments to the % as the scaling was making the image blurry. I just had to divide 200 / 281 to give me 71.117%. As what was happening was it was enlarging the image to the very full DIV size of the box instead of staying at its 200px height. But perhaps I done this incorrect? – Ninjab Aug 12 '14 at 15:13

Justinas · Answer 3 · 2014-08-12T11:17:27.597

-1

Why not use css background-image to do it? Something like here, but in smaller size

.box { 
  /* background: url(images/bg.jpg) no-repeat center center fixed; move this to inline for dynamic images */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 250px;
  height: 250px;
}

If you have images on server, and url to image is stored inside $imageUrl, than:

<div style='background-image: url(<?php echo $imageUrl; ?>);' class='.box'></div>

edited Aug 12 '14 at 11:17

answered Aug 12 '14 at 09:54

Justinas

41,402
5
66
96

Justinas, thanks for the response but my content is generated by PHP with a content component in Joomla for shops, and it generates the JPEGs so background images are not possible. I did see this solution but it wasnt relevant to me due to that. Thanks for responding :) – Ninjab Aug 12 '14 at 11:03
OK thanks I will see if I can work it around my PHP in the template, but not sure if I can as the PHP for the particular image is quite complex and I know nearly nothing about PHP apart from very newbie kinds of things. – Ninjab Aug 12 '14 at 14:07

CSS Cropping Landscape to Square

3 Answers3