Sorry if I am being dense as to what you're after, but your original code works - I think - without the portrait and landscape classes:
https://tomliv.com/css-d/portraitlandscape/index3.html On Tue, Aug 4, 2020 at 8:32 PM Aaron Gray <aaronngray.li...@gmail.com> wrote: > > I have some code that handles landscape and portrait photographs > framing them within a fixed area div. My issue is that I have to set a > class as to whether they are landscape or portrait. > > body { > background-color: black; > } > .thumbnail { > display: inline-block; > position: relative; > width: 8em; > height: 10em; > margin: 0px; > padding: 0px; > border-width: 0px; > } > img { > position: absolute; > top: 50%; > left: 50%; > width: auto; > height: auto; > max-width: 100%; > max-height: 100%; > transform: translate(-50%, -50%); > margin: 0px; > padding: 0px; > border-width: 0px; > } > img.portrait { > height: 100%; > } > img.landscape { > width: 100%; > } > > <div class="thumbnail"> > <img class="portrait" src="..."/> > </div> > <div class="thumbnail"> > <img class="landscape" src="..."/> > </div> > > > I am wondering if there is a way to do this where I don't have to > determine the format and set the class accordingly ? > > Thanks, > > Aaron > > -- > Aaron Gray > > Independent Open Source Software Engineer, Computer Language > Researcher, Information Theorist, and amateur computer scientist. > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
