Image resizing

by TwitchBronBron

CSS

.containerContainer{
  display: inline-block;
  margin: 10px;
}

.container {
  border: 1px solid red;
  display: inline-block;
  position: relative;
  box-sizing: content-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

.padding {
  background-color: blue;
  opacity: .5;
  display: inline-block;
  position: absolute;

}

.item {
  background-color: green;
  display: inline-flex;
    justify-content: center;
  align-items: center;
}

TypeScript

const containers = [{
	width: 400,
	height: 250,
	padding: 48 *2
}];

const items = [
	{
		width: 250,
		height: 40
	},
	{
		width: 336,
		height: 66
	},
	{
		width: 154,
		height: 146
	}, {
		width: 154,
		height: 154
	}, {
		width: 57,
		height: 189
	}
];

for (const container of containers) {
	for (const item of items) {
		const containerDiv = drawContainer(container);
		const itemSize = getItemSize(container, item, true);
		drawItem(containerDiv, itemSize);
	}
    document.body.appendChild(createElement('br'));
}

function getItemSize(container, item, fix) {
	const containerPaddinglessWidth = container.width - (container.padding * 2);
	const containerPaddinglessHeight = container.height - (container.padding * 2);

	const itemAspectRatio = item.width / item.height;
	const containerAspectRatio = containerPaddinglessWidth / containerPaddinglessHeight;

	let newWidth;
	let newHeight;

	if (itemAspectRatio > containerAspectRatio) {
		// Fit width to container and adjust height accordingly
		newWidth = containerPaddinglessWidth;
		newHeight = containerPaddinglessWidth / itemAspectRatio;


		if (fix) {
			let remainingBoxHeight = (containerPaddinglessHeight / 2) - (newHeight / 2); //12.5w
			let boxWidth = remainingBoxHeight * itemAspectRatio;

			if (boxWidth > container.padding) {
				boxWidth = container.padding;
				remainingBoxHeight = boxWidth / itemAspectRatio;


				newHeight += remainingBoxHeight * 2;
				newWidth += boxWidth * 2;

			} else {
				newHeight += remainingBoxHeight * 2;
				newWidth += boxWidth * 2;
			}
		}

	} else {
		// Fit height to container and adjust width accordingly
		newHeight = containerPaddinglessHeight;
		newWidth = containerPaddinglessHeight * itemAspectRatio;

		if (fix) {
			let remainingBoxWidth = (containerPaddinglessWidth / 2) - (newWidth / 2); //12.5w
			let boxHeight = remainingBoxWidth / itemAspectRatio;
			if (boxHeight > container.padding) {
				boxHeight = container.padding;
				remainingBoxWidth = boxHeight *...