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>