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 [[email protected]]
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/
