Maybe this:
<style>
body{
background-color: black;
}
.thumbnail {
display: inline-flex;
position: relative;
width: 8em;
height: auto;
margin: 0px;
padding: 0px;
border-width: 0px;
}
img {
flex: 1;
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
margin: 0px;
padding: 0px;
border-width: 0px;
}
</style>
<div class="thumbnail">
<img class="portrait" src="https://placeimg.com/400/640/any"/>
</div>
<div class="thumbnail">
<img class="landscape" src="https://placeimg.com/640/480/any"/>
</div>
Unless there is a specific need I don't know about
On Thu, Aug 6, 2020 at 9:59 AM Michael Stevens <[email protected]> wrote:
>
> But HOW do you know if it's P or L? Wade is pulling metadata and adding
> that info to his database so when the image is called for the
> orientation is also given so it's easy to output
>
> class="<?php echo $row['orientation']; ?>"
>
> How are you determining the orientation and feeding that data to the
> browser?
>
> Mike
>
>
> On 2020-08-06 5:30 AM, Aaron Gray wrote:
> > For this application, the orientation will always be correct to
> > landscape or portrait.
> >
> > On Wed, 5 Aug 2020 at 11:27, Wade Smart <[email protected]> wrote:
> >> How do you know if they are landscape or not?
> >> A image could have been taken with a camera and its shown sideways
> >> but the phone shows portrait. Im working on a project right now where
> >> Im extracting the metadata from the pic and based on that, putting a
> >> indicator in the db to say landscape or not and when we load all images
> >> based on x filter, as you are getting the image location, you get the
> >> orientation
> >> too.
> >>
> >> --
> >> Registered Linux User: #480675
> >> Registered Linux Machine: #408606
> >> Linux since June 2005
> >>
> >> On Tue, Aug 4, 2020 at 7:32 PM Aaron Gray <[email protected]>
> >> 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 [[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/
> >
> >
>
> ______________________________________________________________________
> 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/
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
______________________________________________________________________
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/
