让图片最长边适应div大小,图片不变形

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让图片最长边适应div大小,图片不变形相关的知识,希望对你有一定的参考价值。

技术分享图片

.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 10px;
  margin-bottom: 10px;
}
.demo-upload-list .img-list {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  float: left;
}

以上是关于让图片最长边适应div大小,图片不变形的主要内容,如果未能解决你的问题,请参考以下文章

用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器?急!!!各位大神帮帮忙

用css如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器?急!!!

Android 如何让图片自适应WebView大小

让图片适应div大小

DIV+CSS,如何让图片自适应大小?

css文件 如何使背景图片大小适应div的大小