Question

我在数据库中有很多图像，这些图像具有完全不同的尺寸。我想确保这些图像切割这些图像，使它们具有相同的尺寸和宽高比。

所以根据我希望做的事情的大小，div是想要的大小，如果它不适合div的大小，图像会被切断。图示

enter image description here

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        body{
            font-family:"Helvetica Neue UltraLight",helvetica,verdana;
            margin-left:0;
            margin-right:0;
            margin-top: 0;
            width   100%;
        }
        section{
            padding-left:5px;
            padding-right:5px;
            font-size:12px;
        }
        h1{
            font-size: 16px;
            padding-left:5px;
        }
        .main_image {
            width: 100%;
            height: 200px;
        }
        .main_image img{

             width: auto;
             height:auto;
        }
    </style>
</head>
<body>

   <div class="main_image">
       <img src="[[[main_image]]]" alt="" />
   </div>
   <h1>[[[title]]]</h1>
   <section>
        <p>[[[full_text]]]</p>
   </section>
</body>
</html>

Answer 1

将图像设置为容器的背景，并将其大小设置为：

<div class="main_image" style="background-image:url([[[main_image]]])" title="[[[alt_desc]]]"></div>

.main_image {
  width: 100%;
  height: 200px;
  background-size: cover;
}

这将按比例缩放图像以填充容器和＆＃34; crop＆＃34;多余的。

Answer 2

水平和垂直居中应该相对简单。

    .main_image img{
         width: auto;
         height: auto;
         margin: auto;
    }

Aspect根据图像的大小填充图像

2 个答案: