Question

这可能吗？我希望图像是一个完美的圆形，无论图像是不是一个完美的正方形，即：100px x 100px。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
}

使用该代码，如果图像为200x150，则img标记将为椭圆形。无论图像尺寸如何，我能得到一个完美的圆圈吗？

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

Answer 1

不，你需要将图像包装在div中，对其应用舍入并隐藏任何溢出。

在这里，我还使用flexbox对图像进行了中心处理，但这不是必需的。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}

<div class="circle">
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

<h2> Actual Image</h2>

  <img src="http://www.fillmurray.com/460/300" alt="">

Answer 2

我知道这个问题有点老了，但是实际上有一种方法可以在不使用包装div的情况下实现所要求的内容：

    public function get_bulk_actions() {

        return array(
                'pay_selected' => __( 'Pay Selected' ),
                'pay_all'   => __( 'Pay All' ),
        );

     }

public function process_bulk_action() {
        
        // security check!
        if ( isset( $_POST['_wpnonce'] ) && ! empty( $_POST['_wpnonce'] ) ) {

            $nonce  = filter_input( INPUT_POST, '_wpnonce', FILTER_SANITIZE_STRING );
            $action = 'bulk-' . $this->_args['plural'];

            if ( ! wp_verify_nonce( $nonce, $action ) )
                wp_die( 'Nope! Security check failed!' );

        }

        $action = $this->current_action();

        switch ( $action ) {

            case 'pay_selected':
                //call the jquery selected_payout()
                break;

            case 'pay_all':
                //call the jquery multi_withdaw()            
                break;

            default:
                // do nothing or something else
                return;
                break;
        }

        return;
     }

Answer 3

使用 object-fit 属性。图像是宽还是长都没有关系，它总是以完美的圆形布置。

.circle {
 border-radius: 50%;
 height: 100px;
 width: 100px;
 object-fit: cover;
 object-position: center;

<img class="circle" src="/link/to/img.jpg" height="80" width="80" />

以下是使用所有不同尺寸图像的示例： https://codepen.io/rockycorp/pen/ZEKbzzp

强制图像标记为完美的圆形

3 个答案: