Question 45107 in Html Question posted in
Some basic documentation can be found here.

Html images suddenly appearing smaller than what they're supposed to be

I’m designing a webpage in html that should have three side by side images that link to individual websites, followed by three more images beneath them. The code used to work well, but now all the images appear very small when viewed in the web browser. I have no idea why this is happening.

I have this code within a rich text field in knack, if that’s at all relevant.

What you’ll also notice is that the last image in each row is stretched unlike the others, I’ve always had this problem. Any solutions would be much appreciated.

Here’s what the images are supposed to look like

Here’s what the images actually look like

Here’s my code:

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
</div>
</body>
</html><html>
<head>
<style>
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="imageExample.com" style="width:500px" "height=300px"></a>
    </div>
</div>
</body>
</html>

I tried re-writing the code and forcing the images to be a certain width and height. Not sure where to go from here.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So turns out that the site I'm using - knack - doesn't really allow users to implement custom webpages with their own html code. The images will always appear off no matter what I do.

    Thanks a lot for the clean code and tips though!


  2. 0

    images must be of width: 100%.

    NB: if you want to add more images, you don’t have to copy the whole html page! only the div you want to copy in this case its <div class="row">

    .column{
  float: left;
  width: 33.33%;
  padding: 5px;
}

.column img {
  width:100%
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
    <html>
<head>
<style>
* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
</div>
<div class="row">
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
    <div class="column">
        <a href="linkExample.com"><img src="https://gratisography.com/wp-content/uploads/2023/02/gratisography-candy-tea-free-stock-photo-1167x780.jpg" ></a>
    </div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search