Question

如何使用bootstrap从矩形图像显示圆形图像？

这里可能是圆圈的代码;

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" >

但它只适用于Square图像，对于Rectangular图像，它会变成eclipse。如何在不给出固定高度或宽度的情况下解决它？

Answer 1

你可以通过从这个答案中提供图像作为背景来实现这一点 - Bootstrap 3: Using img-circle, how to get circle from non-square image?

好吧，如果您仍想使用Img标记来显示图片，那么我会以一种奇怪的方式找到解决方案。

<强> JSFiddle

＆＃13;

div.wrapper {
  text-align: center;
  width: 300px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.clipped-image img {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  right: 0;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

.clipped-image {
  display: block;
  position: relative;
  margin: 0 auto;
  /* desired width */
}

.clipped-image:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}

.clipped-image .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <h4>Original image</h4>
  <div class="real-image">
    <img src="http://loremflickr.com/320/240">
  </div>

  <br>
  <br>
  <br>

  <h4>Image after clipping</h4>
  <div class="clipped-image">
    <div class="mask">
      <img src="http://loremflickr.com/320/240" class="img-circle" alt="Cinque Terre">
    </div>

  </div>
</div>

＆＃13;

Answer 2

../chrome/android/java/src/org/chromium/chrome/browser/mojo/ChromeServiceRegistrar.java:11: error: package org.chromium.mojom.payments does not exist
import org.chromium.mojom.payments.PaymentRequest;
                              ^
../chrome/android/java/src/org/chromium/chrome/browser/payments/AutofillAddress.java:9: error: package org.chromium.mojom.payments does not exist
import org.chromium.mojom.payments.ShippingAddress;
                              ^
../chrome/android/java/src/org/chromium/chrome/browser/payments/AutofillAddress.java:57: error: cannot find symbol
public ShippingAddress toShippingAddress() {
       ^
symbol:   class ShippingAddress
location: class AutofillAddress
../chrome/android/java/src/org/chromium/chrome/browser/payments/AutofillPaymentInstrument.java:13: error: package org.chromium.mojom.payments does not exist

Answer 3

只需执行以下操作即可实现：
像这样向图像添加一个类：

.rounded {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

<img class="rounded" src="https://images.vexels.com/media/users/3/145922/preview2/eb6591b54b2b6462b4c22ec1fc4c36ea-female-avatar-maker.jpg"/>

如何设置圆形图像？

3 个答案: