Image not getting resized

[amrit1993]

Hi all,

So I created a new page and tried to resize the height of the slider banner image I added. The general functionality is it gets resized but now, only the component and not the image is getiing resized.

Any help will be appreciated.

Thanks

[edubey]

Not clear with what you are trying to achieve

Are you using OOTB component?If yes..which one?

Can you share screenshots?

[Lokesh_Shivalingaiah]

thats the OOB behaviour,

once you add an image to a component and then resize, it becomes the content of that page and stores the resize value to that particular page. If you want the actual image to be resized, then create a the rendition of an image when you upload.

creating renditions of an image : https://docs.adobe.com/docs/en/aem/6-0/administer/content/assets/xmp-writeback.html

[amrit1993]

Not an OOB component, right is what I am expecting, left side is what I am getting. Component not made by me.

[edubey]

Thanks for screenshot.

It looks more of CSS, check the css for <img> tag in component, someone might have added fixed height and width.

[amrit1993]

Actually the component is working fine for the earlier pages but for the newly created pages only its not resizing.

[amrit1993]

So I was comparing the working and non working component using developer tools and in the working one only piece of code which was different was an ::after selector.

<span class="js-generated-after"/>

[edubey]

Yup

this might be the change, it will be coming either from CSS or JS

try removing and see the behavior

[kautuk_sahni · Accepted solution]

Hi

Please have a look at this post:-

Link:- http://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-p...

//Can I change the height of an image in CSS :before/:after pseudo-elements?

Adjusting the background-size is permitted. You still need to specify width and height of the block, however. .pdflink:after { background-image: url('/images/pdf.png'); background-size: 10px 20px; display: inline-block; width: 10px; height: 20px; content:""; }

See more :- https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[amrit1993]

Thanks a lot, yes the height and width propert along with the auto attribute of the height needed to be modified