TLDR;
Use este HTML / CSS para agregar y centrar una imagen y establecer su tamaño al 60% del ancho del espacio de la pantalla dentro de su archivo de descuento, que generalmente es un buen valor inicial:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
Cambiar el width valor de CSS al porcentaje que desee, o elimínelo por completo para usar el tamaño predeterminado de reducción, que creo que es el 100% del ancho de la pantalla si la imagen es más grande que la pantalla, o de lo contrario es el ancho de la imagen real.
¡Hecho!
O sigue leyendo para obtener más información.
Aquí hay varias opciones de HTML y CSS que funcionan perfectamente dentro de los archivos de descuento:
1. Centre y configure (cambie el tamaño) TODAS las imágenes en su archivo de descuento:
Simplemente copie y pegue esto en la parte superior de su archivo de marcado para centrar y cambiar el tamaño de todas las imágenes en el archivo (luego simplemente inserte las imágenes que desee con la sintaxis de marcado normal):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
O, aquí está el mismo código que el anterior pero con comentarios detallados de HTML y CSS para explicar exactamente lo que está sucediendo:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
Ahora, si inserta una imagen usando Markdown:
O HTML en su archivo de descuento:
<img src="https://i.stack.imgur.com/RJj4x.png">
... se centrará automáticamente y se dimensionará al 60% del ancho de la vista de pantalla, como se describe en los comentarios dentro del HTML y CSS anteriores. (Por supuesto, el tamaño del 60% también se puede cambiar fácilmente, y a continuación presento formas simples para hacerlo también imagen por imagen).
2. Centre y configure las imágenes caso por caso, una a la vez:
Independientemente de si ha copiado y pegado el <style>bloque anterior en la parte superior de su archivo de reducción, esto también funcionará, ya que anula y tiene prioridad sobre cualquier configuración de estilo de alcance de archivo que haya establecido anteriormente:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
También puede formatearlo en varias líneas, como esta, y seguirá funcionando:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. Además de todo lo anterior, también puede crear clases de estilo CSS para ayudar a estilizar imágenes individuales:
Agregue todo esto a la parte superior de su archivo de descuento.
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
Ahora, su imgbloque CSS ha establecido la configuración predeterminada para que las imágenes se centren y tengan un tamaño del 60% del ancho del espacio de la pantalla, pero puede usar las clases leftAligny rightAlignCSS para anular esas configuraciones imagen por imagen.
Por ejemplo, esta imagen estará alineada al centro y tendrá un tamaño del 60% (el valor predeterminado que configuré anteriormente):
<img src="https://i.stack.imgur.com/RJj4x.png">
Sin embargo, esta imagen se alineará a la izquierda , con el texto ajustado a su derecha, ¡usando la leftAlignclase CSS que acabamos de crear arriba!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
Podría verse así:
Sin embargo, aún puede anular cualquiera de sus propiedades CSS a través del styleatributo , como el ancho, como este:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
Y ahora obtendrás esto:
4. Cree 3 clases CSS, pero no cambie el img valores predeterminados de rebajas
Otra opción a lo que acabamos de mostrar arriba, donde modificamos la img property:valueconfiguración predeterminada y creamos 2 clases, es dejar solo todas las imgpropiedades predeterminadas de reducción , pero crear 3 clases CSS personalizadas, como esta:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
Úselos, por supuesto, así:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
Observe cómo configuro manualmente la widthpropiedad usando el styleatributo CSS anterior, pero si tuviera algo más complicado que quisiera hacer, también podría crear algunas clases adicionales como esta, agregándolas dentro del <style>...</style>bloque anterior:
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
Ahora puede asignar varias clases al mismo objeto, como este. Simplemente separe los nombres de clase por un espacio, NO una coma . En el caso de configuraciones conflictivas, creo que cualquier configuración que ocurra al final será la que surta efecto, anulando cualquier configuración establecida previamente. Este también debería ser el caso en el caso de que establezca las mismas propiedades CSS varias veces en la misma clase CSS o dentro del mismo styleatributo HTML .
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. Consolidar configuraciones comunes en clases CSS:
El último truco es uno que aprendí en esta respuesta aquí: ¿Cómo puedo usar CSS para diseñar varias imágenes de manera diferente? . Como puede ver arriba, las 3 alignclases de CSS establecen el ancho de la imagen al 60%. Por lo tanto, esta configuración común se puede configurar de una vez de esta manera si lo desea, luego puede establecer la configuración específica para cada clase después:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
Más detalles:
1. Mis pensamientos sobre HTML y CSS en Markdown
En lo que a mí respecta, todo lo que se puede escribir en un documento de rebaja y obtener el resultado deseado es todo lo que buscamos, no una sintaxis de "rebaja pura".
En C y C ++, el compilador se compila en código de ensamblaje, y el ensamblaje se ensambla en binario. A veces, sin embargo, necesita el control de bajo nivel que solo el ensamblado puede proporcionar, por lo que puede escribir ensamblaje en línea dentro de un archivo fuente C o C ++. Assembly es el lenguaje de "nivel inferior" y se puede escribir directamente dentro de C y C ++.
Así es con Markdown. Markdown es el lenguaje de alto nivel que se interpreta en HTML y CSS. Sin embargo, donde necesitamos un control adicional, podemos simplemente "en línea" el HTML y CSS de nivel inferior dentro de nuestro archivo de descuento, y aún se interpretará correctamente. En cierto sentido, por lo tanto, HTML y CSS son sintaxis válida de "rebaja".
Entonces, para centrar una imagen en markdown, use HTML y CSS.
2. Inserción estándar de imágenes en rebajas:
Cómo agregar una imagen básica en markdown con el formato HTML y CSS "detrás de escena" predeterminado:
Esta rebaja:
Producirá esta salida:
Este es mi hexacopter que disparó fuego .
También puede agregar opcionalmente una descripción en los corchetes iniciales. Honestamente, ni siquiera estoy seguro de lo que hace, pero tal vez se convierte en un atributo de elemento HTML<img>alt , que se muestra en caso de que la imagen no se pueda cargar, y los lectores de pantalla pueden leerlo para ciegos. Entonces, esta rebaja:
también producirá esta salida:
3. Más detalles sobre lo que sucede en HTML / CSS al centrar y redimensionar una imagen en Markdown:
Centrar la imagen en markdown requiere que usemos el control adicional que HTML y CSS nos pueden dar directamente. Puede insertar y centrar una imagen individual como esta:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
Aquí hay más información. sobre lo que está pasando aquí:
- La
<imgparte del código anterior es la " etiqueta de inicio " HTML , mientras que >al final es la " etiqueta de finalización " HTML .
- Todo, desde la etiqueta de inicio hasta la etiqueta de finalización, inclusive, constituye este
img" elemento " HTML .
- Las
img "etiquetas" / "elementos" HTML se utilizan para insertar imágenes en HTML.
- Cada una de las asignaciones dentro del elemento está configurando un " atributo " HTML .
- El atributo "estilo" acepta el estilo CSS , por lo que todo lo que está dentro de las comillas dobles aquí:
style=""es una property:value" declaración " clave-valor CSS .
- Tenga en cuenta que cada "propiedad: declaración de valor" CSS está separada por un punto y coma (
;), mientras que cada "atributo" HTML en este "elemento" está separado por un espacio (
- Para que la imagen se centre en nuestro código HTML y CSS anterior, los "atributos" clave son simplemente los
srcy style.
- El
altuno es opcional.
- En el interior del HTML
styleatributo, que acepta estilo CSS, las declaraciones clave son los 4 que muestro: display:block, float:none, margin-left:auto, y margin-right:auto.
- Si nada ha configurado la
float propiedad anteriormente, puede omitir esta declaración, pero es una buena idea tenerla de todos modos por si acaso.
- Si primero aprendió a centrar una imagen usando HTML y CSS aquí: https://www.w3schools.com/howto/howto_css_image_center.asp .
- CSS utiliza comentarios de estilo C (
/* my comment */).
Referencias
- Lea más sobre la sintaxis CSS aquí: https://www.w3schools.com/css/css_syntax.asp
- Lea acerca de "Etiquetas HTML vs Elementos" aquí .
- Hice mucho de mi práctica de estilo HTML y CSS en mi archivo Léame de GitHub: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- Aprendí casi todo lo que sé sobre HTML y CSS haciendo clic en w3schools.com. Aquí hay algunas páginas específicas:
- %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- Comentarios HTML y CSS: https://www.w3schools.com/css/css_comments.asp
- Mi hexacóptero de disparos que hice: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
