PROSAGA码农传奇-html/HTML5-顶部，左边使用CSS对齐单个图像

顶部，左边使用CSS对齐单个图像

作者: 晴天3
发布时间: 2024-12-23 12:05:08 (7天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    我首先建议你简单地将图像裁剪为228像素×228像素的正方形，并且人物在图像中适当居中。这将使您在裁剪图像的方式上获得最大的控制权。
  </p>
  <P>
    如果你想用css做，你可以这样做：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          #nick {
  background-image: url(https://www.palousebicycle.org/pictures/nick.jpg);
  background-size: 300%;
  border-radius: 50%;
  width: 228px;
  height: 228px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <div id="nick"></div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
  <P>
    用图像显示图像
     <code>
      background-image
    </code>
     css属性而不是html
     <code>
      <img>
    </code>
     标签可以让您更好地控制裁剪方式。在这种情况下，我刚刚添加了一个
     <code>
      background-size: 300%
    </code>
     适当调整背景大小以适合圆圈中的脸部。
  </p>
</DIV>