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

Question

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/

Answer 1

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>