为什么这个png被推到左边？

Question

我似乎不明白为什么这个PNG图像会被推到左边，我有一种感觉，这与SCSS代码有关。从illustrator导出文件时，这不是文件的问题，在桌面上查看时看起来没有问题，因此一定是SCSS的问题。

这是横幅文件

import React from 'react';
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
import { Row, Col, Button } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import bg1 from '../../assets/img/generic/bg-1.jpg';
import dashboard from '../../assets/img/generic/CellBannerResize.png';

import Section from '../common/Section';

const Banner = () => {
  
  return (
    <Section className="py-0 overflow-hidden" image={bg1} position="center bottom" overlay >
      <Row className="justify-content-center align-items-center pt-8 pt-lg-10 pb-lg-9 pb-xl-0">
        <Col md={11} lg={8} xl={4} className="pb-7 pb-xl-9 text-center text-xl-left">
          <Button tag={Link} color="outline-danger" className="mb-4 fs--1 border-2x rounded-pill" to="/bulk-text-pricing">
            <span className="mr-2" role="img" aria-label="Gift">
              
            </span>
            Send Mass Text Messages Instantly
          </Button>
          <h1 className="text-white font-weight-light">
            Grow your
            <Typed
              strings={['Idea', 'Culture', 'Brand', '']}
              typeSpeed={70}
              backSpeed={40}
              className="font-weight-bold pl-2"
              loop
            />
            <br />
            Build your 
          </h1>
          <p className="lead text-white opacity-75">
          Connect instantly and directly to your 
          audience through text messaging at scale.
          </p>
          <Link className="btn btn-outline-light border-2x rounded-pill btn-lg mt-4 fs-0 py-2" to="/get-a-number">
            Get Started
            <FontAwesomeIcon icon="play" transform="shrink-6 down-1 right-5" />
          </Link>
        </Col>
        <Col xl={{ size: 5, offset: 1 }} >  
          <Link to="/get-a-number" className="img-landing-banner">
            <img  src={dashboard} alt="" />  //<---- this is the image thats giving me trouble....
          </Link>
        </Col>
      </Row>
    </Section>
  );
};

export default Banner;

这是.scss文件

/*-----------------------------------------------
|   Landing banner style
-----------------------------------------------*/
.img-landing-banner{
  border-top-left-radius: $border-radius-soft;
  border-top-right-radius: $border-radius-soft;
  overflow: hidden;
  transform: translateY(-3rem);
  margin-bottom: -28rem;
  transition: transform 0.4s ease;
  position: relative;
  box-shadow: $box-shadow-lg;
  display: block;
  @include media-breakpoint-only(xl){ margin-bottom: -18rem; }
  @include media-breakpoint-only(lg){ margin-bottom: -20rem; }
  &:after{
    content: '';
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    transition: opacity 0.6s;
  }
  @include hover-focus{
    transform: translateY(-5rem);
    &:after{ opacity: 0; }
  }
}
@include media-breakpoint-only(xs){
  .landing-cta-img{
    width: 100%;
    height: auto;
  }
}

/*-----------------------------------------------
|  Back to top button   
-----------------------------------------------*/
.btn-back-to-top{
  background-color: $dark;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: $border-radius;
  left: 50%;
  top: -7.5rem;
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  height: 2.5rem;
  width: 2.5rem;
}

/*-----------------------------------------------
|   Special Card
-----------------------------------------------*/
.card-span{
  transition: all 0.4s ease;
  .card-span-img{
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 5rem;
    height: 5rem;
    background-color: $white;
    box-shadow: $box-shadow-sm;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @include hover-focus{
    transform: translateY(-0.2rem);
    box-shadow: $box-shadow-lg;
  }
}

Answer 1

由于这个问题缺乏相关信息，我将尝试提供一些与问题相关的简单修复方法。

一个元素被推到一边可能有几个原因，比如父节点的box-sizing、margin和padding属性。并且没有为该元素设置宽度和高度属性。

由于问题中没有提供工作沙箱，因此我将建议一些变通方法来适应容器内的图像。

请查看object-fit属性。

其他最简单的解决方案是

具有固定宽度和高度的父对象

 /** Parent Node with Fixed width and height. **/
    
        <div class="imageHolder"> 
          <img src="link" />
        </div>
        
        .imageHolder{
        width: 120px;
        height: 120px;
        }
        
        .imageHolder img{
        max-width: 100%
        max-height: 100%;
        height: auto;
        width:auto;
        }

作为背景的-图像

/** Background-Image, set the image  as a background image. **/
<div class="imagePlaceholder"/>
    
    .imagePlaceholder{
    width: 300px;
    height: auto;
    background-image: url('link');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
    }