duanfeng3879
2016-10-04 18:45
浏览 36
已采纳

大图像,保持右侧内容的大小

I have two sizes of images (vertical and horizontal), they will always be the same size, respectfully. I am trying to create a container that would hold the image but not push the content over and stay a similar height or width. I also dont want to show the image full size so I was thinking about using overflow:hidden. I have attempted this in a JSFiddle seen here but it stretches the container. Any help is appreciated.

<div>
  <span class="mixSpanLeft">
    <a href="somePlace.html"><img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" /></a>
  </span>
  <span class="mixSpanRight">
    <p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes?  Should I have completely different styles for them?
    </p>
  </span>
</div>

http://jsfiddle.net/hmjoLmej/4/

图片转代码服务由CSDN问答提供 功能建议

我有两种尺寸的图像(垂直和水平),它们的尺寸总是相同。 我正在尝试创建一个容器来保存图像,但不会将内容推到一起并保持相似的高度或宽度。 我也不想显示图像的完整大小所以我在考虑使用 overflow:hidden 。 我在这里看到的JSFiddle中尝试了这个,但它延伸了容器。 任何帮助表示赞赏。

 &lt; div&gt; 
&lt; span class =“mixSpanLeft”&gt; 
&lt; a href =“somePlace.html”&gt;&lt;  ; img src =“http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg”/&gt;&lt; / a&gt; 
&lt; / span&gt; 
&lt; span class =“mixSpanRight”&gt;  
&lt; p&gt;图像将始终位于左侧,并且只有两种尺寸,1000x500或500x1000。 如果他们有交替的尺寸,最好的方式是什么? 我应该为它们设置完全不同的样式吗?
&lt; / p&gt; 
&lt; / span&gt; 
&lt; / div&gt; 
   
 
 

http://jsfiddle.net/hmjoLmej/4/

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanjia9577 2016-10-04 19:27
    已采纳

    What about something like this.

    I used the more appropriate flexbox instead of float, which gives greater control of the layout.

    The image is added using background, which gives greater control to scale, clip, etc.

    Note, since the p is block element they should not be children of a span (which is inline element), so I updated your markup/CSS with a div

    Updated, showing how you can add the image source in the markup

    .wrapper {
      display: flex;
    }
    
    .mixSpanLeft {
      width: 50%;
      background-color: #abc;
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
    }
    
    .mixSpanLeft a {
      display: inline-block;
      height: 100%;
      width: 100%;
    }
    
    .mixDivRight {
      width: 50%;
      background: #def;
    }
    
    .mixDivRight p {
      padding: 2%;
    }
    <div class="wrapper">
      <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
      <a href="somePlace.html"></a>
      </span>
      <div class="mixDivRight">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    
    <div class="wrapper">
      <span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
      <a href="somePlace.html"></a>
      </span>
      <div class="mixDivRight">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>

    </div>
    
    打赏 评论

相关推荐 更多相似问题