This is a multi-part message in MIME format.
On 02/02/2021 23:52, Andrew Poulos wrote:
I need a way to size the DIV.container based on the size of the IMG -
the IMG is meant to set the size. The IMG's sizing is supposed to be
based on a percentage size with reference to the viewport. Also the
width and/or the height of the IMG may be auto.
A simple css like so will do the job:
|img { width: 100%; display: inline-block; } |
As far as size is concerned, just use one size. For example if width is
larger than height then use width: 100%; If height is larger than width,
use height: 100%; DON'T USE BOTH UNLESS YOU WANT TO MESS UP THE ASPECT
RATIO.
Stop Biden from censoring the internet
--
With over 1.2 billion devices now running Windows 10, customer
satisfaction is higher than any previous version of windows.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="
https://fonts.googleapis.com/css?family=Brawler"
rel="stylesheet">
<style>
@keyframes test {
0% {
border-color: darkgreen;
}
50% {
border-color: red;
}
70% {
border-color: yellow;
}
100% {
border-color: grey;
}
0% {
border-color: darkgreen;
}
0% {
border-color: darkgreen;
}
0% {
border-color: darkgreen;
}
}
@keyframes newsgroups {
0% {
border-color: red;
}
16.66666667% {
border-color: orange;
}
33.33333333% {
border-color: yellow;
}
50% {
border-color: green;
}
66.66666667% {
border-color: blue;
}
83.33333333% {
border-color: indigo;
}
100% {
border-color: violet;
}
}
body {
background-color: #d6cdab;
font-family: 'Brawler', 'Montserrat', 'Roboto', 'Open+Sans', 'sans-serif', 'serif';
margin: 0;
padding: 0 0 20px 0;
}
div.newsgroups {
border: solid transparent 10px;
background-color: #eee;
animation-name: newsgroups;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
padding: 10px;
font-size: 18px;
width: 60%;
margin: auto;
box-sizing: border-box;
}
ul {
list-style-type: square;
}
img {
width: 100%;
display: inline-block;
}
</style>
</head>
<body text="#008000" bgcolor="#faf0e6">
<div class="newsgroups">
<div class="moz-cite-prefix">On 02/02/2021 23:52, Andrew Poulos
wrote:<br>
</div>
<blockquote type="cite"
cite="mid:
JKGdnaysGZgheIT9nZ2dnUU7-cnNnZ2d@westnet.com.au"><br>
<br>
I need a way to size the DIV.container based on the size of the
IMG - the IMG is meant to set the size. The IMG's sizing is
supposed to be based on a percentage size with reference to the
viewport. Also the width and/or the height of the IMG may be
auto. <br>
<br>
<br>
</blockquote>
<p>A simple css like so will do the job:</p>
<pre><code>
img {
width: 100%;
display: inline-block;
}
</code>
</pre>
<p>As far as size is concerned, just use one size. For example if
width is larger than height then use width: 100%; If height is
larger than width, use height: 100%; DON'T USE BOTH UNLESS YOU
WANT TO MESS UP THE ASPECT RATIO. </p>
</div>
<div class="moz-signature">-- <br>
<div style="background-color: blue; color: yellow; font-weight:
bolder; display: grid; align-items: center; justify-items:
center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
">
<p>With over 1.2 billion devices now running Windows 10,
customer satisfaction is higher than any previous version of
windows.</p>
</div>
</div>
</body>
</html>
--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)