将响应式图像与Flexbox一起使用

Question

我想使用flexbox和响应式图片（带有scrset和sizes的图片）。但结果似乎很可怕。即使我使用flex-grow拉动对齐，图像也有不同的高度，因为浏览器会加载不同大小的不同图像。我希望所有图像的高度都一样。

如果我使用flexbox，我发现sizes图像很难设置，它已经不可预测了。有什么方法可以解决这个问题吗？

Here是JSfiddle（请调整结果窗口的大小，我使用内联css flex-grow）

Answer 1

将图像高度属性设置为：

import cv2
import numpy as np

im = cv2.imread("three.png")

imgray = cv2.cvtColor(im, cv2.COLOR_BGR2GRAY)
ret, thresh = cv2.threshold(imgray, 127, 255, 0, cv2.THRESH_BINARY_INV | cv2.THRESH_OTSU)
_, contours, hierarchy = cv2.findContours(thresh, cv2.RETR_TREE, cv2.CHAIN_APPROX_NONE)

cnts = cv2.drawContours(im, contours[1], -1, (0, 255, 0), 1)

cv2.imshow('number_cnts', cnts)
cv2.imwrite('number_cnts.png', cnts)

m = cv2.moments(cnts[0])
cx = int(m["m10"] / m["m00"])
cy = int(m["m01"] / m["m00"])

cv2.circle(im, (cx, cy), 1, (0, 0, 255), 3)

cv2.imshow('center_of_mass', im)
cv2.waitKey(0)
cv2.imwrite('center_of_mass.png', cnts)

如果您希望所有图像的大小相同，则为flex-grow设置相同的值。

height:100%;