Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 01:29:22 +00:00
Code Issues Projects Releases Wiki Activity

Use background for showing images

Browse source 
This prevents images which are larger than the element from having their
image squished.
This commit is contained in:
Jordan Eldredge 2019-08-16 07:28:36 -07:00
parent 9ed01e9b89
commit b8026b9a4e
1 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

52
modern/src/App.js
View file

@ -148,22 +148,25 @@ function Layout({
}
return (
<>
<img
data-node-type="layout"
data-node-id={id}
src={image.imgUrl}
draggable={false}
style={{
minWidth: minimum_w == null ? null : Number(minimum_w),
minHeight: minimum_h == null ? null : Number(minimum_h),
maxWidth: maximum_w == null ? null : Number(maximum_w),
maxHeight: maximum_h == null ? null : Number(maximum_h),
position: "absolute",
}}
/>
<div
data-node-type="layout"
data-node-id={id}
src={image.imgUrl}
draggable={false}
style={{
backgroundImage: `url(${image.imgUrl})`,
width: image.w,
height: image.h,
// TODO: This combo of height/minHeight ect is a bit odd. How should we combine these?
minWidth: minimum_w == null ? null : Number(minimum_w),
minHeight: minimum_h == null ? null : Number(minimum_h),
maxWidth: maximum_w == null ? null : Number(maximum_w),
maxHeight: maximum_h == null ? null : Number(maximum_h),
position: "absolute",
}}
>
{children}
</>
</div>
);
}
@ -196,17 +199,18 @@ function Layer({ node, id, image, children, x, y }) {
if (img.h !== undefined) {
params.height = Number(img.h);
}
if (img.imgUrl !== undefined) {
params.backgroundImage = `url(${img.imgUrl}`;
}
return (
<>
<img
data-node-type="Layer"
data-node-id={id}
src={img.imgUrl}
draggable={false}
style={{ position: "absolute", ...params }}
/>
<div
data-node-type="Layer"
data-node-id={id}
draggable={false}
style={{ position: "absolute", ...params }}
>
{children}
</>
</div>
);
}