Блог

У меня есть изображения двух размеров (вертикальные и горизонтальные), они всегда будут одинакового размера, с уважением. Я пытаюсь создать контейнер, который будет содержать изображение, но не переносить содержимое и сохранять одинаковую высоту или ширину. Я также не хочу показывать изображение в полном размере, поэтому я думал об использовании overflow:hidden . Я пытался сделать это в JSFiddle, который можно увидеть здесь, но он растягивает контейнер. Любая помощь приветствуется.

 <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/

Как насчет чего-то подобного.

Я использовал более подходящее flexbox вместо float , что дает больший контроль над макетом.

Изображение добавляется с помощью background , что дает больший контроль над масштабированием, обрезкой и т. Д.

Обратите внимание, поскольку элемент p является блоком, они не должны быть дочерними элементами a span (который является встроенным элементом), поэтому я обновил вашу разметку / CSS с помощью div

Обновлено, показано, как вы можете добавить источник изображения в разметку

 .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>