Question

var result = myDbContext.Cust             // take the cust table
    .Where(cust => cust.UserName == name) // keep only custs with Username == name
    .Join(myDbContext.Customers,          // Join the result with Customers table
    cust => cust.CustomerId,              // From every cust take the CustomerId
    customer => customer.CustomerId,      // From every customer take the CustomerId
    (cust, customer) =>                   // when they match take the cust and the Customer
       customer                           // to select the matching Customer

.banner-1{
  background: #f0f0f0;
}
.pcontainer {
  background: url(https://i.imgur.com/R1tpEs7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 32px;
  margin-top: 122px;
  padding-top: 61px;
  padding-bottom: 56px;
  padding-left: 44px;
}

我已经创建了一个容器<div class="container-fluid banner-1"> <div class="row"> <div class="col"> <div class="triangle-down"></div> <div class="row"> <div class="col offset-md-6 pcontainer"> <h2>Why Move to Websphere Commerce v9</h2> <p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them. </p> <p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep <br>capabilities so you gain maximum impact from every customer interaction and transaction.</p> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"> Learn More </button> </div> </div> </div> </div> </div>。在此之下，我创建了另一个容器banner-1，其背景为矩形。现在我面临的问题是，每当我在移动设备/平板电脑中进行测试时，矩形图像中的折叠就被裁剪掉了，但是在桌面站点中，折叠显示了整个宽度。有没有一种方法可以使背景中没有裁剪的图像。我希望折叠后的完整图像显示在背景中。

Answer 1

尝试删除pcontainer的边距：

.banner-1 {
  background: #f0f0f0;
}

.pcontainer {
  background: url(https://i.imgur.com/R1tpEs7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 0;
  margin-top: 0;
  padding-top: 61px;
  padding-bottom: 56px;
  padding-left: 44px;
}

<div class="container-fluid banner-1">
    <div class="row">
        <div class="col">
            <div class="triangle-down"></div>
            <div class="row">
                <div class="col offset-md-6 pcontainer">
                    <h2>Why Move to Websphere Commerce v9</h2>
                    <p class="one">Give customers the ability to seamlessly move between channels to browse and buy when, where and how it’s most <span><a href="#">convenient</a></span> for them.</p>
                    <p class="two">IBM Watson Commerce’s innovation ecosystem offers complete and deep
                        <br>capabilities so you gain maximum impact from every customer interaction and transaction.</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                        Learn More
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

您可以应用"dependencies": { "babel-polyfill": "^6.26.0", "classnames": "^2.2.5", "css-loader": "^1.0.0", "grunt": "^1.0.2", "grunt-available-tasks": "^0.6.3", "grunt-check-dependencies": "^1.0.0", "grunt-npm-command": "^0.1.2", "grunt-run": "^0.8.0", "json-server": "^0.14.0", "lodash": "^4.17.4", "moment": "^2.20.1", "prop-types": "^15.6.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-moment": "^0.7.9", "react-mutation-observer": "^1.1.0", "react-redux": "^5.0.6", "react-router-dom": "^4.2.2", "react-scripts": "1.1.4", "redux": "^4.0.0", "redux-devtools-extension": "^2.13.2", "redux-thunk": "^2.2.0", "typeface-roboto": "0.0.54", "@material-ui/core": "^1.3.0" }，然后它将修复右上角的图像

background-position: top right;

.banner-1 {
  background: #f0f0f0;
}

.pcontainer {
  background: url(https://i.imgur.com/R1tpEs7.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 32px;
  margin-top: 122px;
  padding-top: 61px;
  padding-bottom: 56px;
  padding-left: 44px;
  background-position: top right;
}

当屏幕分辨率较小时，背景图像会被裁剪掉

2 个答案: