Image not getting resized | Community
Skip to main content
amrit1993
amrit1993
Level 3
March 2, 2016
Solved

Image not getting resized

  • March 2, 2016
  • 9 replies
  • 1775 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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-pseudo-elements

//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

9 replies

edubey
edubey
Level 10
March 2, 2016

Not clear with what you are trying to achieve

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

Can you share screenshots?

Lokesh_Shivalingaiah
Lokesh_Shivalingaiah
Level 10
March 3, 2016

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
amrit1993Author
Level 3
March 3, 2016

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

edubey
edubey
Level 10
March 3, 2016

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
amrit1993Author
Level 3
March 4, 2016

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

amrit1993
amrit1993Author
Level 3
March 4, 2016

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
edubey
Level 10
March 4, 2016

Yup

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

try removing and see the behavior

kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
March 7, 2016

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-pseudo-elements

//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

Kautuk Sahni
amrit1993
amrit1993Author
Level 3
March 21, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...