图片不应在元素中使用全角
Image should not use full-width in element
目前我正在尝试对我制作的线框进行编程，但遇到了一些问题，特别是元素的左侧：
问题是 200x200 像素的图像在左栏中显示为全宽。因此我无法将图像居中。
我可以看到它可以通过覆盖下面的 CSS 来改变，并设置 width to none;.
.cms-area img {
width: 100%;
}
但据我所知，它会破坏图像的响应吗？
有人能帮我进球吗？
请参阅[此处的测试页][2]。
该站点仍在使用 Bootstrap 3，我无权更改主 CSS。因此，如果需要，我需要覆盖 CSS。
此致
<style>
#front .row {
padding-bottom: 0px;
}
.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-white-bg {
padding: 15px;
background-color: #fff;
margin-bottom:30px;
border: 1px solid #ebecf0;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.padding-grey-bg {
padding: 7.5px;
}
.padding-white-border {
border: 1px solid #ebecf0;
}
.top-pad-d {
padding-top: 15px;
}
.sbp-2-column {
background-color:#fff;
padding-top:15px;
padding-bottom:15px;
border:1px solid #ebecf0;
}
/********************************/
/* Product styling */
/********************************/
/* Make spot image go full width */
.cms-area .result-cols ul.items li.add-item {
width: 100% !important;
}
.cms-area .result-cols ul.items li.add-item .item {
padding: 0px;
}
/* Remove add to basket button */
.cms-area .result-cols ul.items li.add-item a.button-add {
display:none;
}
/* Set height on product description */
.cms-area .result-cols ul.items li.add-item .desc {
height: 0px;
overflow: visible;
}
/* Remove fade on product headline */
.cms-area .result-cols ul.items li.add-item .desc:after {
background: none;
}
.cms-area .result-cols .more-wrap {
padding-bottom: 0px;
}
/* Remove Sub-heading */
.desc2{
display:none;
}
/* Remove product text */
.ext-description {
display:none;
}
/* Remove padding multiple products on row */
.cms-area .result-cols {
padding:0px;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
@media screen and (max-width: 896px){
.top-pad-m {
padding-top: 15px;
}
}
@media only screen and (max-width: 1280px) {
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 60vh;
}
}
/********************************/
/* Overall Styling */
/********************************/
#sbp-hr {
margin-top:10px !important;
margin-bottom:10px !important;
}
.sbp-align {
text-align: left;
padding-left:10px;
}
.test {
padding:20px 20px 20px 20px;
}
/* TEST on 2 column */
.classWithPad { margin:8px; padding:10px; background-color: #fff; border:1px solid #ebecf0;}
.cms-area img {
max-width: 100%;
}
</style>
<div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">
<p style="padding:75px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" class="img-responsive test"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如果您将 width=200px 设为左栏，则上传的图片将始终居中，并且有很多 padding 用于使图片居中，您可以使用各种 classes bootstrap 个！
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<!-- Section 7 -->
<div class="section padding-two column-bg">
<div class="row align-items-center">
<div class="text-center col-md-6 col-12">
<div class="classWithPad">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" width="200px"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row p-3">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align pb-2">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
目前我正在尝试对我制作的线框进行编程，但遇到了一些问题，特别是元素的左侧：
问题是 200x200 像素的图像在左栏中显示为全宽。因此我无法将图像居中。
我可以看到它可以通过覆盖下面的 CSS 来改变，并设置 width to none;.
.cms-area img {
width: 100%;
}
但据我所知，它会破坏图像的响应吗？
有人能帮我进球吗？
请参阅[此处的测试页][2]。
该站点仍在使用 Bootstrap 3，我无权更改主 CSS。因此，如果需要，我需要覆盖 CSS。
此致
<style>
#front .row {
padding-bottom: 0px;
}
.row [class*="col-"] {
padding-right: 7.5px;
padding-left: 7.5px;
}
.padding-white-bg {
padding: 15px;
background-color: #fff;
margin-bottom:30px;
border: 1px solid #ebecf0;
}
.padding-twocolumn-bg {
margin-bottom:30px;
}
.padding-grey-bg {
padding: 7.5px;
}
.padding-white-border {
border: 1px solid #ebecf0;
}
.top-pad-d {
padding-top: 15px;
}
.sbp-2-column {
background-color:#fff;
padding-top:15px;
padding-bottom:15px;
border:1px solid #ebecf0;
}
/********************************/
/* Product styling */
/********************************/
/* Make spot image go full width */
.cms-area .result-cols ul.items li.add-item {
width: 100% !important;
}
.cms-area .result-cols ul.items li.add-item .item {
padding: 0px;
}
/* Remove add to basket button */
.cms-area .result-cols ul.items li.add-item a.button-add {
display:none;
}
/* Set height on product description */
.cms-area .result-cols ul.items li.add-item .desc {
height: 0px;
overflow: visible;
}
/* Remove fade on product headline */
.cms-area .result-cols ul.items li.add-item .desc:after {
background: none;
}
.cms-area .result-cols .more-wrap {
padding-bottom: 0px;
}
/* Remove Sub-heading */
.desc2{
display:none;
}
/* Remove product text */
.ext-description {
display:none;
}
/* Remove padding multiple products on row */
.cms-area .result-cols {
padding:0px;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
@media screen and (max-width: 896px){
.top-pad-m {
padding-top: 15px;
}
}
@media only screen and (max-width: 1280px) {
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 60vh;
}
}
/********************************/
/* Overall Styling */
/********************************/
#sbp-hr {
margin-top:10px !important;
margin-bottom:10px !important;
}
.sbp-align {
text-align: left;
padding-left:10px;
}
.test {
padding:20px 20px 20px 20px;
}
/* TEST on 2 column */
.classWithPad { margin:8px; padding:10px; background-color: #fff; border:1px solid #ebecf0;}
.cms-area img {
max-width: 100%;
}
</style>
<div class="wrapper">
<!-- Section 7 -->
<div class="section padding-twocolumn-bg">
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">
<p style="padding:75px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" class="img-responsive test"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" style="padding:10px;">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如果您将 width=200px 设为左栏，则上传的图片将始终居中，并且有很多 padding 用于使图片居中，您可以使用各种 classes bootstrap 个！
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
<!-- Section 7 -->
<div class="section padding-two column-bg">
<div class="row align-items-center">
<div class="text-center col-md-6 col-12">
<div class="classWithPad">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a><img src="https://placehold.it/200x200" width="200px"></a>
</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">
<div class="row p-3">
<div class="col-sm-12">
<h3 class="sbp-align">Headline</h3>
<hr>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align pb-2">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
<div class="col-sm-6">
<img src="https://placehold.it/250x150" width="100%" class="pb-2">
<h4 class="sbp-align">Subline</h4>
<p class="sbp-align">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr id="sbp-hr">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>