Question

我有两个盒子。一个包含图像，另一个包含文本。如何根据盒子的大小调整图像？因为当前图像在盒子大小上流动，如我在代码中所示：

     <div class="left-column">
        <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
    </div>

    <div class="right-column">
        <h2>Nevex has the experience</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p>
        <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button>
    </div>

以下是css

    * {
  box-sizing: border-box;
 }  
   img{
    max-width=100%;
    height: auto;
   width: auto;
   }   
 .left-column{
  width:50%;
  height:auto;
  float: left;
  border:1px solid red;
 }
 .right-column{
  width:50%;
 float: left;
 border:1px solid red;
 }

https://jsfiddle.net/Wosley_Alarico/b2htLvcj/4/

最后，我希望两个框彼此相邻，大小相同，文本使用媒体查询与中心对齐。

将不胜感激。

Answer 1

将图像放在带有image类的div中。看看这个。

HTML

  <div class="image">
        <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
  </div>

CSS

.image img {
    max-width:100% !important;
    max-height:100% !important;
    display:block;
}

Answer 2

您的CSS代码中存在错误：max-width=100%;应为max-width:100%;两分。

Answer 3

您可以将flexbox用于列的大小。但是你需要添加一个包含div。

示例：

＆＃13;

<div class="content">
<div class="left-column">
            <img src="http://www.opulencesoaps.co.za/Images/2links.jpg" alt="">
        </div>
        
        <div class="right-column">
            <h2>Nevex has the experience</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum rem a tempore tenetur unde alias amet deserunt veritatis. Nemo, iste, quis! Eligendi dolores similique id nostrum non, in velit?</p>
            <button class="button" type="button" onclick="There will be more information in future">FIND OUT MORE</button>
        </div>        
</div>

＆＃13;

cat file.txt | tr -s "/" ' ' | awk -F " " '{print $1}' | sort | uniq > outfile.txt

＆＃13;

响应式图像和网格

3 个答案: