html - 如何在 CSS 中调整这些图像的大小？

Question

我的老板让我更新公司网站，因为我会一点代码，但我无法将图像放大。这是页面上的 html 代码:

        <!----******* The Second Title Section -->
        <!--<div style="width: 95%;overflow: hidden; margin:0 auto;" >
            <div class="rightProduct">
                <p class="partsTitle">Part Numbers and Manufacturers</p>
            </div>
        </div>-->
        <!----******* The main product Section-->

        <div class="apartmentInnerWrapper">
            <div class="leftProduct">
                                    <div class="flexslider">
                  <ul class="slides">
                                                             <li> 
                        <img src="https://efuses.com/wp-content/uploads/2018/11/copper-bus-bar-500x500.jpg" alt="H05" width="320" height="240"/> 
                         </li>

                  </ul>
                </div>
            </div>

            <div class="rightProduct">
                <br></br> <p class="categoryTitle">Copper Busbar - In Stock and Ready for Immediate Shipment</p>
                                    <p class="communityHeader">

                </p>
                <div class="fuseDescription">
                    <span class="fuseDescriptionP">
                        <br>Cut to Length</br>
                    <br>Bent and Drilled to Your Specs</br>
                    <br>Custom Fabrication</br>
                    </span>
                    <span><br>
                        <img src="https://efuses.com/wp-content/uploads/2018/11/H05WhiteBG.jpg" alt="H05" class="myimage" /> 
                        <img src="https://efuses.com/wp-content/uploads/2018/11/H02WhiteBG.jpg" alt="H02" class="myimage" /></br>
                    </span>
                    <p></p>
                    <img src="https://efuses.com/wp-content/uploads/2016/06/Express_Shipping-150.png"><span>In Stock Item & Ready to Ship</span>
                    <p class="chatLink">For Instant Quote - Open the Chat Below<br>
                        <a href="javascript:void(0)" class="talkPerson" style="margin: 0; padding: 0; text-align: center; text-decoration: none !important; color: #000;">Or Email Us at </a>
                        <a href="#contact_form_pop" class="fancybox talkPerson" >quote@powerfuse.com</a><br>
            <a href="javascript:void(0)" class="talkPerson" style="margin: 0 11px 0 0; padding: 0; text-align: center; text-decoration: none !important; color: #000;">Or Call Us at</a>
                        <span class="number talkPerson">918-665-6888</span>

这是 CSS 脚本:

/*************
 community Page CSS
 ************/
/* Contact Form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{
    background-color: #fff;
    border: 2px solid #2F3396;
    color: #000;
    width: 90%;
}

.site-header {
    display: none;
} 

.flexslider {
max-width: 600px;
margin: 0 auto 60px !important;
}

.site-inner {
    padding: 0px !important;
    max-width: 3000px !important;
}

a {
    border-bottom: none !important;
    text-decoration: none !important;
}

 .communityMobileContainer {
    display: none;
}

 .communityContainer {
    width: 100%;
    margin:  0;
    padding: 0px 0px 0px 0px;
    overflow: hidden; 
}

.apartmentInnerWrapper {
    width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 10px 0px 20px 0px;
}

/********************* 
    Community Header
 *********************/


.apartmentBanner {
    width: 100%;
    overflow: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
}

.topBanner {
    background-color: #2F3396; 
    height: 100px;/*F8C800*/
}

.bottomBanner {
    background-color: #C1D0D3;
    width: 100%;
    padding: 5px 0;
    /*position: relative;
    top: -40px;*/
}

.bottomBanner a {
    color: #2F3396 !important;
}

.apartmentPets, 
.apartmentBannerMap,
.apartmentBannerPrice {
    float: left;
    width: 33%;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.apartmentPets1, 
.apartmentBannerMap1 {
    float: left;
    width: 25%;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.apartmentBannerPrice1 {
    float: left;
    width: 50%;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.apartmentPets a {
    color: #fff;   
}


.communityViewMap a {
    color: #fff;
}  

.talkSection > a{
    padding-top: 10px !important;
    color: #C1D0D3;
    font-size: 30px;
} 

.talkSection  > a:hover {
color: #fff;
}

.talkSection .powerFuseBottom {
position: relative;
top: -29px;
}


.apartmentBannerMap {
    padding-top: 4px;
}

 .talkPerson  {
    font-size: 18px !important;
font-weight: 600 !important; 
padding: 5px 10px 5px 0px !important; 
border: 0 !important; 
top: 0px !important;
color: #c3251d;
text-decoration: underline !important;
}

.communityViewMap .talkPerson  {
font-size: 18px !important;
font-weight: 600 !important; 
padding: 5px 10px 5px 0px !important; 
border: 0 !important; 
top: 0px !important;
color: #2F3396;
text-decoration: none !important;
}

 a:hover {
    color: #000;
    cursor: pointer;
}

.apartmentPets {
    padding-top: 4px;
}

/* End Banner */

.rightProduct .partsTitle {
    margin: 10px 0 0px;
    font-size: 24px;
    font-weight: 400;
}

.learnAboutFact {
    margin: 10px 0 0px;
    font-size: 32px;
    font-weight: 400;
    color: #2F3396;
    text-align: center;
    display: block;
}

/* Product Desciption */


.communityContainer .categoryTitle {
    font-size: 30px;
    font-weight: 600;
    text-decoration: none;
    color: #2F3396;
    margin: 0px;
}

.communityContainer .categoryFuseTitle {
    font-size: 26px;
    font-weight: 600;
    text-decoration: none;
    color: #2F3396;
    margin: 0px;
    padding: 35px 0 20px;
}

.communityContainer .leftProduct {
    padding: 3px 12px;
    width: 45%;
    float: left;
    overflow: hidden;
}

.communityContainer .leftProduct img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.communityContainer .rightProduct {
    padding: 3px 12px;
    width: 53%;
    float: right;
    overflow: hidden;

}

.fuseDescriptionP {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0px;
}

.fuseDescriptionP p {
    margin-bottom: 0px;
}

.contactUsBanner{
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #000;
}

.contactUsBanner a {
    padding: 10px 15px;
    color: #000;
}

.contactUsBanner a:hover {
    color: #2F3396;
}


/* End Product Description */


 .communityContainer .communityHeader {
    padding: 2px 12px 0 0;
    margin: 0 0 0 0;
    width: 100%;
    float: left;
    text-align: left;
}  

 .communityContainer .communityHeader .communityTitle {
    font-size: 30px;
    font-weight: 600;
    text-decoration: none;
    color: #2F3396;
}

.communityContainer .fuseDescription p {
    font-size: 16px;
}

/********************* 
Community Description Section 
 *********************/ 

.communityContainer .fuseDescription{
    width: 100%;
    overflow: hidden;
    padding: 0px 10px 5px 0px;
}

.communityContainer .fuseDescription myimages {
    width: 400px;
    height: 300px;
}

.communityContainer .fuseDescription span {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    top: -15px;
    padding: 0 0 0 15px;
}

.communityContainer .fuseDescription .chatLink {
    font-size: 24px;
    font-style: italic;
    font-weight:600;
    margin-bottom: 2px;
}

.communityContainer .fuseDescription p{
    font-size: 16px;
}

.communityDescriptionHalf {
    float: left;
    width: 48%;
    padding: 0px 4px;
}

.communityDescriptionThird {
    float: left;
    width: 32%;
    padding: 0px 4px;
}

.communityDescription .communityPlansTitle {
    padding: 3px 0 20px 0px;
    width: 100%;
    display: block;
    clear: left;
}

.communityPlansDataLeft,
.communityPlansDataRight {
    width: 48%;
    float: left; 
    font-size: 16px;
    font-weight: 400;
    padding: 0 10px!important;
}

.communityPlansInfo h4{
    font-size: 24px;
    color: #004c71; 
    margin: 5px 0 2px 0 !important;
    padding: 0 10px!important;
    font-weight: 700;
    text-align: center;
}

.communityPlansInfo p {
    font-size: 18px;
    margin: 0px 0 4px 0 !important;
    padding: 0 10px!important;
    font-weight: 600;
    color: #000;
}

/* Footer */

.footer-widgets {
    padding: 0px;   
    background-color: #C1D0D3;
}

.footer-widgets .wrap {
    padding: 0px;
    margin: 0px;
    max-width: 3000px;
    color: #fff;
}

.footer-widgets .wrap a {
    padding: 0px;
    margin: 0px;
    max-width: 3000px;
    color: #fff;
}

.footer-widgets-1 {
    width: 100%;
    float: left;
    padding: 20px 4%;
    text-align: center;
    margin: 0px;
    font-size: 22px;
    color: #2F3396;
}  

.footer-widgets-1 p {
    margin-top: 5px;
    margin-bottom: 20px;
}  

.footer-widgets-1 .widgettitle {
    text-align: center;
    color: #2F3396;

}

.footer-widgets-2 {
    width: 50%;
    float: left;
    padding: 20px 4% 0px;
    margin: 0px;
    font-size: 18px;
    color: #2F3396;
}
.footer-widgets-2 .widgettitle {
    color: #2F3396;
}

.footer-widgets-1 a:hover,
.footer-widgets-2 a:hover {
    color: #000;
}

.footer-widgets-3{
    width: 20%;
    float: left;
    padding: 20px 4% 0px;
    margin: 0px;
    font-size: 18px;
}

.footer-widgets-3 .widgettitle {
    color: #2F3396;
}

.footer-widgets .widget {
    margin-bottom: 10px;
}

.widgettitle {
    text-align: center;
    padding-top: 10px;
    margin-bottom: 10px;
    font-size: 32px;
}

.site-footer {
    background-color: #23282D;
    color: #fff;
}

.site-footer a {
    color: #fff;
}

/*********************
      Mobile CSS
 *********************/

@media (max-width: 1000px) {

.communityContainer .communityPhone {
    text-align: center;
    width: 100%;
    padding: 12px 0;
    clear: both;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3{
    width: 100%;
    clear: left;
    text-align: center;
}

.widgettitle {
    text-align: center !important;
    padding-top: 20px;
}

.communityContainer .communityUrl {
   text-align: center;
    width: 100%;
    padding: 12px 0;
    clear: both;

}

}

@media (max-width: 800px) {

.apartmentInnerWrapper {
    width: 100%;
    padding-top: 25px;
}

.topBanner {
    height: 190px;
}

.apartmentPets, 
.apartmentBannerPrice,
.apartmentBannerMap {
    clear: left;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
}

.communityDescriptionHalf {
    clear: left;
    width: 100%;
}

.communityDescriptionThird {
    clear: left;
    width: 100%;
}

.communityContainer .leftProduct {
    clear: both;
    width: 100%;
}

.communityContainer .rightProduct {
    clear: both;
    width: 100%;
    padding: 0 0 25px 0;
}

 .communityContainer .communityHeader {
    width: 100%;
} 

.communityContainer .communityHeader .communityBuilder {
    padding: 6px 3px;
}

}

@media (max-width: 700px) {

 .communityMobileContainer {
    display: inline-block!important;
}

 .communityContainer {
    display:  important;
}

#communityPlansAll {
 width: 100%;
 max-width: 500px;
 margin: 2px auto 2px auto;
}


/*********************
      End Mobile CSS
 *********************/

}





/*******************
*******************
Fuse Category Page
*******************
*******************/



.allAgentsWrapper {
    width: 100%;
    padding: 0 0 75px;
    overflow: hidden;
}

.allAgentsWrapper .allAgents {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
    padding: 40px 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.singleAgent {
    padding: 20px 10px;
    width: 200px;
    height: auto;
}

.singleAgent .bpTitle{
    text-align: center;
    font-size: 16px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 7px;
    color: #606060;
    font-family: Oswald,Tahoma,Arial,sans-serif;
}

.singleAgent .bpImg {
    width: 100%;
    height: auto;
    border: 1px solid #f6f6f6;
}

.singleAgent .fuseImageWrapper {
    overflow: hidden;
    min-height: 144px;
}

.singleAgent .bpDesc p {
    font-size: 12px;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    line-height: 17px; 
    text-align: justify;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.singleAgent .AgentTop {
    width: 100%;
    padding: 5px 0;
}

.singleAgent .AgentTop .leftTop {
    float: left;
    width: 50%;
    margin: 0;
    padding: 5px 0;
}
.singleAgent .AgentTop .rightTop {
    float: right;
    width: 50%;
    margin: 0;
    padding: 5px 0;
}


.singleAgent .bpPrice {
    font-size: 16px;
    text-align: center;
    padding: 5px 0 0;
    letter-spacing: 1px;
    font-family: Oswald,Tahoma,Arial,sans-serif;
}

.singleAgent .bpLink {
    padding: 7px 11px;
    float: right;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    background-color: #faab37;
    border-radius: 0;
    font-family: Oswald,Tahoma,Arial,sans-serif;
    text-shadow: 1px 1px rgba(0,0,0,.25);
    border: 0;
    outline: 0;
     -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}


.singleAgent .bpLink:hover {
    background-color: #000;
}

.singleAgent .bpIcons {
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}


.singleAgent .bpIcon i {
    font-size: 18px;
    padding: 0 5px;
}  


/* Single Agent Page */


.singleWrapper .topImage {
    padding: 15px;
}

.singleWrapper .topSection {
    padding: 5px 15px 15px;
}

.singleWrapper .topSection .bpTitle {
    padding: 5px 0;
}

.singleWrapper .topSection .bpDesc {
    padding: 5px 0 15px;
}

.singleWrapper .topSection .bpLink {
    float: left;
    padding: 7px 11px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    background-color: #faab37;
    border-radius: 0;
    font-family: Oswald,Tahoma,Arial,sans-serif;
    text-shadow: 1px 1px rgba(0,0,0,.25);
    border: 0;
    outline: 0;
     -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}


.singleWrapper .topSection .bpPrice {
    margin-left: 10px;
    float: left ;
    color: #606060;
    font-size: 20px;
    padding: 16px 0 0;
    letter-spacing: 1px;
    font-family: Oswald,Tahoma,Arial,sans-serif;
}

.singleWrapper .leftImage {
    max-width: 300px;   
}

.singleWrapper .rightSection {
    max-width: 500px;   
}

.singleWrapper .bpIcon i {
    font-size: 22px;
    padding: 0 5px 15px;
}  

我尝试将这段代码添加到 CSS 文件的社区描述部分，看看它是否可行，但没有成功。

.communityContainer .fuseDescription myimages {
    width: 400px;
    height: 300px;
}

基本上我很困惑。任何帮助，将不胜感激。

这是页面的链接:

https://efuses.com/copperbusbar/

有问题的两张图片位于 Custom Fabrication 字样下方。

谢谢!

Answer 1

我推断，由于您有 2 张图片，您希望将它们并排对齐，并让它们分别占据大约一半的可用空间。所以解决方案可能是:

.communityContainer .fuseDescription img { display: inline-block; width: 49%; height: auto; }

首先，您需要一个正确引用和覆盖当前上下文的选择器，因此需要 2 个类和一个元素。然后，将图像显示为inline-blocks 允许它们遵守所有浏览器的宽度和高度规范。 49% 的宽度 可确保它们紧密地排成一行，而不会挤压外边距。 高度自动确保它们保持原始比例并且不会倾斜。

你的错误是 myimages 选择器，它在 CSS 中并不存在，除非你想指定类名 .myimages 这也可以工作。使用百分比与像素时的方法不同在于，百分比会适应不同上下文和浏览器大小下可用的屏幕空间。

还有一些基于 CSS 网格规范的其他更高级的解决方案，它们对一条“行”上的可变数量的图像执行相同的技巧，但我猜你不需要那种复杂性来解决这个特定的问题问题。 :)