The pseudo element, which sits inside the parent, has no width, but it indirectly specifies its' own height by means of padding-bottom: 100% - which is equal to the parent's width due to CSS inner-workings (weirdly enough, if you specify padding in percentage value, it will be relative to parent's width).
The parent's CSS only specifies its' own width but not height which is 0 by default. x-card-photo, give it position: absolute width: 100% height: 100% so that it fills the entire available space.
Whenever the parent width shrinks, the padding-bottom will shrink too! Thus, padding bottom will adjust to the changes of its' parent (set by max-width: 125px ). x-card-photo::after) and set its' padding-bottom: 100%. Add a pseudo-element for this container (.x-card-photo in your case) and give it a position: relative and a desired width ( max-width: 125px ). The trick exploits the fact that padding percentage value is relative always to the parent element's width (even padding-top/bottom). There's a CSS trick you can use to create an element which preserves any aspect ratios after resizing. The second (and accepted) solution below works!! Thanks a lotīox-shadow: rgba(0,0,0,0.2) 0px 0px 15px That zooms the image to fill enough to have a circle? Perhaps a better solution would be to have an attribute However, this still results in the image being too long and cut off
#GRAPHIC CONVERTER MAC LASSO TOOL FORCED ASPECT RATIO UPDATE#
UPDATE 1 As per answer below I added the following to replace the border radius: I feel like I have tried everything, but nothing seems to work. The widespread solution is to have object-fit: cover and either set height: auto or play around otherwise with width / height and max-width / max-height. The problem seems to be that the underlying picture is not square, but that's exactly the problem I want to resolve, so that regardless of what the user uploads, it's always neatly integrated. However, on lower screen resolutions the thumbnail (right image below) shape morphs into an egg. I have a circle thumbnail img (.x-card-img) that crops also rectangular images on desktop.
0 kommentar(er)
