How come my gifs appear tiny even though I've adjusted their width to 32% each?

I am trying to display three gifs in a row, each taking up one-third of the width of the page. However, when I preview the page, the gifs appear tiny. I have set the divs to 32% each and the gifs should fill 100% of their respective div. Here is the code snippet I am working with:

<div id="3wizards" width=100% style="float:center">
  <div id="w1" width=32% style="float:left">
    <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w2" width=32% style="float:left">
   <img src="wizard(1).gif" width=100%>
  </div>
  <div id="w3" width=32% style="float:right">
   <img src="wizard(1).gif" width=100%>
  </div>
</div>

This is how it looks on the page: Image showing the three wizard gifs as small. https://i.stack.imgur.com/jq136.png

(While I could remove the divs altogether, I want to keep them in case I want to add text to one of the thirds in the future. So, I would like to figure out how to make it work with the current setup for potential future use.)

htmlcss

Answer №1

Hey there Anura, take a look at this code snippet. To start off, enclose the code within a main wrapper and utilize flex to align it in the same row.

<div class="gif-wrapper">
   <div id="w1" class="gif">
     <img src="wizard(1).gif" width=100%>
   </div> 
   <div id="w2" class="gif">
    <img src="wizard(1).gif" width=100%>
   </div>
   <div id="w3" class="gif">
    <img src="wizard(1).gif" width=100%>
   </div>
</div>

CSS:

.gif-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.gif-wrapper .gif {
    width: calc(100% / 3 - 30px);
    margin: 0 15px;
}

Implement media queries for responsiveness across various devices.

Answer №2

To resolve this issue, utilize the flex property:

<div id="3wizards" width=100% style="display: flex;gap:2%;">
  <div id="w1" width=32% height=100%>
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w2" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
  <div id="w3" width=32%>
   <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" width=100%>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

javascripthtmljsongoogle-chrome-extension

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

javascripthtmlgoogle-chrome-extensiondom-eventsindexeddb

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

javascripthtmlexpressresponsebody-parser

Problem with logo in MVC4 apps

I'm working on incorporating a logo into my MVC 4 website. When the logo is clicked, it should navigate to the home screen. In order to achieve this, I've added the following code snippet in the _Layout.cshtml file. <a href='<%= Url.A ...

htmlasp.net-mvcasp.net-mvc-4

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

Having trouble transferring JSON data to HTML using Angular.JS for a programming course. The author doesn't seem to have this issue, can anyone provide some assistance? I've correctly linked Angular and added the app, but it's not working a ...

javascripthtmlangularjsjson

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas

Issue with CSS causing elements to display improperly within nested grids

I am facing an issue where I want to nest a grid within another grid, but the elements in the nested grid are not appearing in the order I desire. Specifically, I would like the "#classes" section to be at the bottom of the nested grid, but it remains stuc ...

csscss-grid

Encountering issues with properly implementing the .replaceWith(jQuery('#content')) function in CodeIgniter

I'm having trouble with using the jQuery function .replaceWith(jQuery('#content') in Codeigniter. While I can successfully replace the "content" part of my html, the page background image is not showing up. Controller: public function inde ...

phpjqueryhtmlcodeigniter

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

cssrubyxmlxpathcss-selectors

Tips for effectively redirecting multiple links on a website

Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...

phphtmlhttp-redirect

Is it possible to create a CSS-only negative border radius?

I'm reaching out for help with a specific issue. I want to create a unique negative border radius for my navigation links, similar to the design shown in this image: http://prntscr.com/9vi0b5 Instead of using images like in the example, I'm look ...

csscss-shapes

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

javascriptjqueryhtmlcssparallax

The art of perfect alignment: Mastering the positioning of Material-UI Grid

This issue has been resolved Hey there, I'm currently working on a React App with Material-UI and I'm trying to center a Grid item that includes a Card along with two additional Grid items. Below is the relevant code snippet. Although the Cards ...

javascriptcssreactjsmaterial-uimaterial-design

Tips for stopping html form from refreshing upon submission

Hello, despite extensive searching and testing, I am still unable to locate the issue and therefore I am reaching out to seek your assistance in resolving my problem. Within a form that I have created, upon clicking the submit button, a javascript functio ...

javascripthtmljqueryforms

Stopping HTML 5 video playback while transitioning to a different webpage

My website has a layout with a left menu containing video links and a content area where the videos are played. However, I have encountered an issue when switching between videos. Currently, if I click on Video 1 and then decide to watch Video 2 while Vid ...

jqueryhtmlvideo

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

javascriptjqueryhtmlcss

Toggle the visibility of a div by clicking on another div in a

I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it. While I know this question has been asked before, my scenario is slightly different. I want the div with the ...

javascriptjqueryhtmlcss

Having difficulty replicating the same effect across all five canvas elements

After following the code provided by j08691 here for canvas, everything worked flawlessly. However, I encountered an error in JavaScript when trying to implement it on multiple canvas elements. As a beginner in JavaScript, I would greatly appreciate any as ...

javascripthtmlcanvas

Retrieve the content from an HTML table cell enclosed within a division tag

I am currently facing an issue where I need to extract the value from a specific div in order to proceed with the program. The value that I am trying to retrieve is '12345678'. <td id="TransaccionTesoreriaRetencionItems_NroComprobanteRete ...

htmlpython-3.xseleniumselenium-chromedriver