automatic cropping of images

This commit is contained in:
nvrl committed 2026-02-16 16:21:11 +01:00
1 parent e3ff27ab09
commit b6d3db3404
5 files changed
+50 -41

No files matched your search

+16 -12
View File
@@ -123,8 +123,9 @@ const CategoryList: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 2,
bgcolor: 'background.default',
borderBottom: '1px solid',
borderColor: 'divider',
overflow: 'hidden'
}}
>
@@ -132,10 +133,11 @@ const CategoryList: React.FC = () => {
component="img"
src={flavor.image_url}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'transform 0.5s ease',
'&:hover': { transform: 'scale(1.1)' }
}}
/>
</Box>
@@ -230,8 +232,9 @@ const CategoryList: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 2,
bgcolor: 'background.default',
borderBottom: '1px solid',
borderColor: 'divider',
overflow: 'hidden'
}}
>
@@ -239,10 +242,11 @@ const CategoryList: React.FC = () => {
component="img"
src={flavor.image_url}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'transform 0.5s ease',
'&:hover': { transform: 'scale(1.1)' }
}}
/>
</Box>
+12 -10
View File
@@ -132,8 +132,9 @@ const Dashboard: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 0.5,
bgcolor: 'background.default',
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
overflow: 'hidden'
}}
@@ -142,9 +143,9 @@ const Dashboard: React.FC = () => {
component="img"
src={rating.flavor_image}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain'
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/>
</Box>
@@ -206,8 +207,9 @@ const Dashboard: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 0.5,
bgcolor: 'background.default',
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
overflow: 'hidden'
}}
@@ -216,9 +218,9 @@ const Dashboard: React.FC = () => {
component="img"
src={flavor.image_url}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain'
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/>
</Box>
+6 -5
View File
@@ -90,8 +90,9 @@ const PublicProfile: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 1,
bgcolor: 'background.default',
border: '1px solid',
borderColor: 'divider',
borderRadius: 1,
overflow: 'hidden'
}}
@@ -100,9 +101,9 @@ const PublicProfile: React.FC = () => {
component="img"
src={rating.flavor_image}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain'
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/>
</Box>
@@ -93,8 +93,9 @@ const CategoryFlavors: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: 3,
bgcolor: 'background.default',
borderBottom: '1px solid',
borderColor: 'divider',
overflow: 'hidden'
}}
>
@@ -102,13 +103,12 @@ const CategoryFlavors: React.FC = () => {
component="img"
src={flavor.image_url}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
transition: 'transform 0.3s ease-in-out',
filter: 'drop-shadow(0px 4px 8px rgba(0,0,0,0.1))'
width: '100%',
height: '100%',
objectFit: 'cover',
transition: 'transform 0.5s ease',
'&:hover': { transform: 'scale(1.1)' }
}}
className="product-image"
/>
</Box>
)}
+8 -6
View File
@@ -161,18 +161,20 @@ const FlavorDetail: React.FC = () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'action.hover',
p: { xs: 4, md: 6 }
bgcolor: 'background.default',
borderRight: { md: '1px solid' },
borderBottom: { xs: '1px solid', md: 'none' },
borderColor: 'divider',
overflow: 'hidden'
}}
>
<Box
component="img"
src={flavor.image_url}
sx={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
filter: 'drop-shadow(0px 12px 24px rgba(0,0,0,0.15))'
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/>
</Box>