图像响应问题CSS

Question

我正在使用Owl Carousel作为图像滑块。问题是我希望我的所有图像都是方形容器（每个图像的单个容器） 我可以用

解决这个问题

宽度：100％;高度：自动

但是当我使用不同分辨率的图像时会出现问题。每个图像可以有不同的分辨率，但我仍然希望所有图像显示为

之后，在大屏幕上播放300x300或400x400并做出响应

Answer 1

我不认为强迫尺寸是解决这个问题的最佳方法，这取决于你想要操纵什么，是高度还是宽度？

#editedWidth {
  max-width: 100%;
  width: auto;
  height: 300px;
}

#editedHeight {
 max-width: 100%;
 width: 300px;
 height: auto;
}

链接到CODEPEN

Answer 2

您可以使用background-size: cover - http://codepen.io/bluminethemes/pen/Yqobgx

Answer 3

如果你想成为你的图像响应然后你应该你的图像具有方形分辨率，因为如果你使用矩形类型的图像，那么它将根据原始分辨率重新调整大小