On Fri, 7 Aug 2020 at 18:14, Tom Livingston <tom...@gmail.com> wrote:
>
> 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
Tom, that looks brilliant, is it the width: auto, height: auto, and
max-width: 100%, and max-height: 100% that do the trick ?
This will save a lot of work, I may well still allow overrides, as was
implicitly suggested by Wade, so as to provide a general solution. I
also found some JavaScript code for this working from the EXIF data,
or my .json image list file format, but I would have thought the EXIF
orientation would have already been applied. I will look into this.
https://gist.github.com/runeb/c11f864cd7ead969a5f0
Many thanks !
Aaron
> 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 ?
--
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/
