diff --git a/css/components/elements/_media.scss b/css/components/elements/_media.scss
index 4f20f7571c..0dda60e841 100644
--- a/css/components/elements/_media.scss
+++ b/css/components/elements/_media.scss
@@ -16,10 +16,20 @@ iframe.asymptote,
 
 // images in containers should grow to fit space
 .image-box img,
-img.contained {
+.image-box svg {
     width: 100%;
 }
 
+.image-box.image-box__auto-width img,
+.image-box.image-box__auto-width svg
+{
+    max-width: 100%;
+    width: auto;
+    margin-left: auto;
+    display: block;
+    margin-right: auto;
+}
+
 // ---------------------------------------------
 // images
 .ptx-content img, .ptx-content svg {
diff --git a/examples/sample-article/media/images/new-folder-screenshot.png b/examples/sample-article/media/images/new-folder-screenshot.png
new file mode 100644
index 0000000000..7f20d364f4
Binary files /dev/null and b/examples/sample-article/media/images/new-folder-screenshot.png differ
diff --git a/examples/sample-article/sample-article.xml b/examples/sample-article/sample-article.xml
index 07af90cb74..6287889731 100644
--- a/examples/sample-article/sample-article.xml
+++ b/examples/sample-article/sample-article.xml
@@ -3306,6 +3306,23 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
                     <image source="images/nz-landscape.jpg" width="80%"/>
                 </figure>
 
+                <p>Images that are given a <attr>width</attr> (always as a percentage) are scaled to that percentage of their container. Images without a <attr>width</attr> will be rendered at their natural size if possible and as large as possible if not. This can be seen in these three renderings of the same screenshot:</p>
+
+                <figure>
+                    <caption>A new folder with <c>width="100%"</c></caption>
+                    <image source="images/new-folder-screenshot.png" width="100%"/>
+                </figure>
+
+                <figure>
+                    <caption>A new folder with <c>width="50%"</c></caption>
+                    <image source="images/new-folder-screenshot.png" width="50%"/>
+                </figure>
+
+                <figure>
+                    <caption>A new folder with no <attr>width</attr></caption>
+                    <image source="images/new-folder-screenshot.png"/>
+                </figure>
+
                 <p>If you have existing images that are vector graphics, then PDF format works best for <latex/> output and SVG format works best for HTML.  The utility <c>pdf2svg</c> works well for converting PDF to SVG.  In this case, specify your source as a filename, but leave off the file extension, and the appropriate version will be used for the current output format.</p>
 
                 <p>The image below is provided from a PDF file in <latex/> output, and was converted to an SVG for use with the HTML output.  It has been explicitly scaled to a width of 65% of the text width.</p>
@@ -3347,7 +3364,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <figure>
                     <caption>Solution to a differential equation</caption>
-                    <image width="60%">
+                    <image>
                         <prefigure label="prefigure-diffeq"
                                    xmlns="https://prefigure.org">
                             <diagram dimensions="(300,300)" margins="5">
@@ -3375,7 +3392,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <p>This next diagram employs some <latex/> macros that are defined in the usual way in <tag>docinfo</tag> and are employed to produce the names of some vectors in the labels.  The blue line is colored blue by a global <prefigure/> declaration, also in <tag>docinfo</tag>.</p>
 
-                <image width="60%">
+                <image>
                     <prefigure label="prefigure-projection"
                                xmlns="https://prefigure.org">
                         <diagram dimensions="(300,300)" margins="5">
@@ -3418,7 +3435,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 
                 <p>The next <prefigure/> diagram is authored with annotations, arranged in a hierarchy of increasing refinement and detail.  Each identified graphical component will read its annotation and show it on the screen below the diagram.  When a reader clicks on the image, a high-level summary will be read using the author-provided annotation.  The down and up arrow keys enable a reader to explore the diagram in more or less detail while the right and left arrow keys reveal features at the same level of detail.  When the focus is on the graph, pressing "O" will produce a sonification of the graph.</p>
 
-                <image width="60%">
+                <image>
                     <prefigure label="prefigure-tangent"
                                xmlns="https://prefigure.org">
                         <diagram dimensions="(300,300)" margins="5">
diff --git a/xsl/pretext-common.xsl b/xsl/pretext-common.xsl
index ffbd5a4b37..4e9544feee 100644
--- a/xsl/pretext-common.xsl
+++ b/xsl/pretext-common.xsl
@@ -5462,6 +5462,9 @@ Book (with parts), "section" at level 3
     <centered>
         <xsl:value-of select="$centered" />
     </centered>
+    <width-native>
+        <xsl:value-of select="$normalized-width"/>
+    </width-native>
 
     <!-- This will be useful in a debugging switch -->
 <!--
diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index f7a9624b59..348fb0696c 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -5856,13 +5856,19 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <!-- fill this box horizontally, with necessary vertical dimension -->
 <!-- to preserve the aspect ratio.  This div is also used to       -->
 <!-- provide vertical spacing from its surroundings.               -->
-<xsl:template match="image[not(ancestor::sidebyside)]">
+<xsl:template match="image">
     <xsl:variable name="rtf-layout">
         <xsl:apply-templates select="." mode="layout-parameters" />
     </xsl:variable>
     <xsl:variable name="layout" select="exsl:node-set($rtf-layout)" />
     <!-- div is constraint/positioning for contained image -->
-    <div class="image-box">
+    <div>
+        <xsl:attribute name="class">
+            <xsl:text>image-box</xsl:text>
+            <xsl:if test="$layout/width-native = 'auto'">
+                <xsl:text> image-box__auto-width</xsl:text>
+            </xsl:if>
+        </xsl:attribute>
         <xsl:attribute name="style">
             <xsl:text>width: </xsl:text>
             <xsl:value-of select="$layout/width"/>
@@ -5884,15 +5890,6 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </pre>
 </xsl:template>
 
-<!-- The div for a panel of a sidebyside will provide  -->
-<!-- the constraint/positioning of the contained image -->
-<!-- If the panel is a PTX "figure" then there will be -->
-<!-- an intermediate HTML "figure" which will not      -->
-<!-- interfere with the panel's constraints            -->
-<xsl:template match="image[ancestor::sidebyside]">
-    <xsl:apply-templates select="." mode="image-inclusion" />
-</xsl:template>
-
 <!-- With a @source attribute, without an extension, -->
 <!--   we presume an SVG has been manufactured       -->
 <!-- With a @source attribute, with an extension,    -->
diff --git a/xsl/pretext-latex-common.xsl b/xsl/pretext-latex-common.xsl
index a803112644..c3b6e2ad54 100644
--- a/xsl/pretext-latex-common.xsl
+++ b/xsl/pretext-latex-common.xsl
@@ -405,6 +405,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     <xsl:call-template name="chapter-start-number"/>
     <xsl:call-template name="equation-numbering"/>
     <xsl:call-template name="image-tcolorbox"/>
+    <xsl:call-template name="image-sizing"/>
     <xsl:call-template name="tables"/>
     <xsl:call-template name="footnote-numbering"/>
     <xsl:call-template name="font-awesome"/>
@@ -1384,6 +1385,24 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
     </xsl:if>
 </xsl:template>
 
+<!-- image sizing support -->
+<xsl:template name="image-sizing">
+    <xsl:if test="$document-root//image">
+        <xsl:text>%% Define maxwidth variable for includegraphics&#xa;</xsl:text>
+        <xsl:text>%% recipe from https://texfaq.org/FAQ-grmaxwidth &#xa;</xsl:text>
+        <xsl:text>\makeatletter&#xa;</xsl:text>
+        
+        <xsl:text>\def\maxwidth{%&#xa;</xsl:text>
+        <xsl:text>  \ifdim\Gin@nat@width&gt;\linewidth&#xa;</xsl:text>
+        <xsl:text>    \linewidth&#xa;</xsl:text>
+        <xsl:text>  \else&#xa;</xsl:text>
+        <xsl:text>    \Gin@nat@width&#xa;</xsl:text>
+        <xsl:text>  \fi&#xa;</xsl:text>
+        <xsl:text>}&#xa;</xsl:text>
+        <xsl:text>\makeatother&#xa;</xsl:text>
+    </xsl:if>
+</xsl:template>
+
 <!-- tcolorbox for images -->
 <xsl:template name="image-tcolorbox">
     <xsl:if test="$document-root//image">
@@ -1391,7 +1410,7 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
         <xsl:text>%% arguments are left-margin, width, right-margin, as multiples of&#xa;</xsl:text>
         <xsl:text>%% \linewidth, and are guaranteed to be positive and sum to 1.0&#xa;</xsl:text>
         <xsl:text>\tcbset{ imagestyle/.style={bwminimalstyle} }&#xa;</xsl:text>
-        <xsl:text>\NewTColorBox{tcbimage}{mmm}{imagestyle,left skip=#1\linewidth,width=#2\linewidth}&#xa;</xsl:text>
+        <xsl:text>\NewTColorBox{tcbimage}{mmm}{imagestyle,left skip=#1\linewidth,width=#2\linewidth,halign=center}&#xa;</xsl:text>
         <xsl:text>%% Wrapper environment for tcbimage environment with a fourth argument&#xa;</xsl:text>
         <xsl:text>%% Fourth argument, if nonempty, is a vertical space adjustment&#xa;</xsl:text>
         <xsl:text>%% and implies image will be preceded by \leavevmode\nopagebreak&#xa;</xsl:text>
@@ -9294,7 +9313,15 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
             </xsl:with-param>
         </xsl:call-template>
     </xsl:variable>
-    <xsl:text>\includegraphics[width=\linewidth</xsl:text>
+    <xsl:text>\includegraphics[width=</xsl:text>
+    <xsl:choose>
+        <xsl:when test="@width">
+            <xsl:text>\linewidth</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+            <xsl:text>\maxwidth</xsl:text>
+        </xsl:otherwise>
+    </xsl:choose>
     <xsl:if test="@rotate">
       <xsl:text>,angle=</xsl:text>
       <xsl:value-of select="@rotate"/>