图片不应在元素中使用全角

问题描述 投票：3回答：1

目前，我正在尝试对已制作的线框进行编程，但是特别是在元素的左侧会遇到一些问题：

enter image description here

问题是200x200px的图像在左栏中变为全角。因此，我无法将图像居中。

我可以看到它可以通过覆盖以下CSS进行更改，并设置width to none;。

.cms-area img {
    width: 100%;
}

但是据我所知，它将破坏图像的响应速度？

有人可以在这里帮助我实现目标吗？

请参见Testpage here。

该站点仍在使用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>
html css twitter-bootstrap twitter-bootstrap-3
1个回答
0
投票
如果将width=200px放在左列，则上载的图像将始终居中，并且有很多padding用于使图像居中，您可以使用各种classes的引导程序！

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.