What is the best way to ensure that table cells containing images resize without any issues?

I need help with centering and resizing an image on a screen. The image is divided into small images within cells, but I can't seem to get it right.

Despite trying various solutions and spending hours resizing the table and images, the final output always comes out broken.

Original Image Link: https://i.sstatic.net/I8hPr.jpg

Current Result: https://i.sstatic.net/wuxAY.jpg

I have also included the code snippets below and uploaded them along with the images to Google Drive:

Google Drive Link: https://drive.google.com/drive/folders/1rOmjAniDTHqtH1hxvfdRC1YmHRSJ6qmm?usp=sharing

HTML

    <html>
<head>
<title>Image</title>
<link rel="stylesheet" href="mystyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (20200123_170249.jpg) -->
<table id="Table_01" class="center" width="1001" height="564" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/20200123_170249_01.png" width="413" height="68" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/20200123_170249_02.png" width="251" height="141" alt=""></td>
        <td rowspan="2">
            <img src="images/20200123_170249_03.png" width="169" height="141" alt=""></td>
       ...
</body>
</html>

CSS

    <style>

.center {
  margin-left: auto;
  margin-right: auto;
}

</style>

Any help would be greatly appreciated!

htmlcsshtml-table

Answer №1

In response to the previous comments, one efficient method would be to group all the images in a single div and utilize CSS-Grid on the container. With a total width of 1001px, create a grid with 1001 columns using 

grid-template-columns: repeat(1001, 1fr);

To position the images within the grid (demonstrated for the first 8 pictures), follow this format:

.container {
  display: grid;
  grid-template-columns: repeat(1001, 1fr);
}

img {
  width: 100%;
}

img:nth-child(1) {
  grid-column: 1 / 414;
  grid-row: 1 / 69;
}
...

<img src="https://drive.google.com/uc?id=153dLnHVKVFafuEXTdvQx9CO8R7Oxy6sw"></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

Retrieve information from an external JSON file and present it in a table format - Obtain the most recent data available

I am attempting to extract the data from On the website, there is a dropdown menu that displays two different screenshots. I want to modify my code so that it shows the most recent screenshot data in a table. Here is my current code: http://jsfiddle.net ...

jqueryhtmljsonparsing

Trigger the scrolling of one div when another div is scrolled

Link to Jsfiddle I'm attempting to activate my current scroll while I am outside that scroll, specifically in #DivDet Here is the code snippet of what I have tried so far: $("div#DivDet").scroll(function () { // Still trying to figure out what ...

javascriptjquerycsshtml

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

htmlcssogg

Ways for enabling the user to choose the layout option

I am looking to develop a customized reporting system where users can select the specific fields they want to include in the report as well as arrange the layout of these fields. The data for the reports is sourced from a CSV file with numerous columns. Us ...

javascriptjqueryhtmlarrays

Troubleshooting issue arising from transferring code from CodePen to a text editor

I've attempted to recreate a Codepen example in my HTML files on my computer, but it's not displaying correctly. While the static layout resembles what appears in Codepen, the background with the moving squares isn't functioning as expected ...

htmlcss

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

Hey there! I'm working on this website using Bootstrap, and I've encountered a problem. When you click the "See Wikipedia" button, the content expands and overlaps the footer in a strange way without changing the page height. I've tried adju ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...

javascripthtmlcssonclickshow-hide

Tips for transforming JSON data from a specified URL, which requires authorization, into an HTML table or list using PHP

I am attempting to retrieve JSON data from this source: They have provided a 'how to' guide here: I have successfully connected with Authorization and received the raw JSON, but I am unable to format it into a table. This is the code I have wr ...

phphtmljsonxml

minimize the size of the indigenous foundation input field

Currently incorporating this code snippet into my application: <Item fixedLabel> <Input style={{ width: 0.5 }}/> </Item> The fixedLabel element is extending the entire width of the screen. I have attempted adju ...

javascriptcsstypescriptreact-nativenative-base

Looking to display dropdown menus on a new line along with a text input field using jQuery?

<script type="text/javascript"> var arr = [{ val: 1, text: 'Option 1' }, { val: 2, text: 'Option 2' }]; $(function () { $('a').click(function () { var sel = $('<select>&apo ...

jquerycss

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

Material UI does not have built-in functionality for displaying colored text within a multiline textfield component in React

Attempting to utilize the material ui library in a react app has brought an issue to light. It appears that styling colored text does not work as expected for multiline textfields. Consider the following scenario: import React, { Component } from 'r ...

cssreactjsmaterial-designmaterial-ui

Parent div's overflow due to its flexbox properties

I am currently facing a dilemma with my nested flexbox setup. The primary objective is to create two responsive columns: .ColWrap, { width: 100%; box-sizing: border-box; background-color: #fff; padding: 50px 10px 50px 25px; display: fl ...

css

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

The issue of the container div tag not being able to achieve 100% height and width

My web page layout has a CSS issue where I am unable to achieve 100% height in Firefox and Chrome, unlike in Internet Explorer 9. I have tried multiple examples but encountered the same problem. You can view the code on http://jsfiddle.net/cwkzq/3/ where i ...

csshtmlheightwidth

What causes Chrome to crash when dealing with lengthy tail files?

My objective is to display a log file in real-time using a websocket connection. However, I am facing performance issues with Chrome when the paragraph ('p') element in the HTML becomes large (about 450 lines). This is the current implementation ...

javascripthtmltailapache-tailer

Store user input in a paragraph

I want to create a unique program that allows users to input text in a field, and when they click "Start", the text will appear in a paragraph backwards. I plan to use Html, jQuery, and CSS for this project. Can anyone provide guidance on how to achieve th ...

javascriptjqueryhtmlcss

What sets apart the HTML tags for embed, object, and video elements?

Can you explain the technical distinctions among these three tags and provide reasons why one might be chosen over another? Additionally, why did the embed tag lose popularity in HTML 4 and get replaced by object, only to see a resurgence in HTML 5 while ...

htmlobjectvideoembed