Bootstrap 4 es una biblioteca CSS para desarrollo web frontend desarrollada por Twitter que ayuda al desarrollador a embellecer la apariencia de la página web. La biblioteca de arranque tiene clases CSS predefinidas que son fáciles de usar y ayuda al desarrollador a proporcionar una apariencia artística al sitio web con un mínimo esfuerzo.
La siguiente línea muestra la sintaxis para insertar una imagen simple en la página web
<img src="image-path" alt="Show this text if image does not appear" />
En realidad, hay tres formas de resolver este problema. Voy a proporcionar las tres soluciones aquí.
- Proporcionando un borde a la imagen. Por lo tanto, hace que la imagen aparezca dentro de la caja.
- Usando css personalizado para insertar una imagen dentro de un div que tiene propiedades de borde.
- Mediante el uso de bootstrap.
Veamos la demostración de las formas mencionadas anteriormente.
- Proporcionando un borde a la imagen.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Bootstrap - Image inside Box</title></head><!-- Custom css to provide border to the image --><style>img{border:5px solid green;/* This line gives a green border of 5 pixelswidth to all images on the webpage. */This line does not cause any spacebetween the image and the border. */}</style><body><h2>Putting image inside a Box</h2><!-- Put the path of image in the src of image tag. --><imgsrc="..."alt="Image Loading Failed"/></body></html>Producción:
- Usando css personalizado
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Bootstrap - Image inside Box</title></head><!-- Custom css to provide border to the div --><style>/*border class is used to give border to the div tag.*/.border{border:5px solid green;/* green border of 5 pixels width */padding:0;/* padding to remove the spacebetween inner components of the div*/max-width: fit-content;/*making the div take thesize of the image*/}img{display: block;/* to make the image occupythe whole container */}</style><body><h2>Putting image inside a Box</h2><!-- Enclosing the image tag inside the divhaving border class.--><divclass="border"><imgsrc="..."alt="Image Loading Failed"/></div></body></html>Producción:
- Usando bootstrap 4 css: usaremos la clase predefinida conocida como tarjetas para hacer que la imagen aparezca dentro de un cuadro.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Bootstrap - Image inside Box</title><linkrel="stylesheet"href=integrity="sha256-A47OwxL/nAN0ydiDFTSGX7ftbfTJTKgiJ0zqCuTPDh4="crossorigin="anonymous"/></head><style>.border {border: 5px solid green !important;/* Border of width 5 pixels green in color */width: fit-content;/* To make the image take whole space of container */}</style><body><!-- Providing necessary padding and margin --><h2class="mx-5 mt-5">Putting image inside a Box</h2><!-- using card class to place image inside a box --><!-- Added custom css class border for additional properties --><!-- Added necessary padding and margin classes --><divclass="card mx-5 px-0 py-0 border"><!-- Added card-img-top class to showthe image on the top of the card. --><!-- Since the image is the only content in card --><!-- Image appears to be taking the whole card. --><imgsrc="..."alt="Image Loading Failed"class="card-img-top"/></div></body></html>Producción:
