Resize html image in Weebly to available space

Question

I am creating a site using Weebly where I have images that are links to other pages. In order to show that the images are links, I have put them in as embedded html and used some code to change the opacity when the mouse is hovering over them. I then put a link around this.

I can't seem to get the code to go in here, so here is a jsbin of it

I don't know very much HTML, so I got most of this from google searches. This works , but it will only ever display the image at it's native resolution, and Weebly will only give the HTML box a certain amount of space depending on the screen size. I want two of these images to be next to each other on the site, and evenly resize to fill the whole horizontal space, maintaining the same aspect ratio. I have looked at how to do this (such as this) but I can't get any of it to work.

Baezid Mostafa · Accepted Answer · 2016-09-23T17:24:47.807

2

Try this css on your image11. Maybe your looking something like this one LiveOnFiddle

       .two_img {
    display: inline-flex;
    
  }
  
  .image11 {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
  border: 1px solid red; /*only for view both image are separete */
  }
  
  .image11:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
  }

<div class="two_img">
<a href="link">
 <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg">
</a>
<a href="link">
 <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg">
 </a>
</div>

edited Sep 23 '16 at 17:24

answered Sep 23 '16 at 17:10

Baezid Mostafa

2,680
2
14
26

Is there a way to add a margin between each picture? The margin in the CSS is only above and below – BananaConsultant Sep 23 '16 at 17:34
Yes for instant you can separate them using a{ padding-left:5px; } – Baezid Mostafa Sep 23 '16 at 17:48
Where would I put the padding? I put it into the .image11{} section and it doesn't appear to do anything. I have no experience with html or css so thanks for bearing with me. – BananaConsultant Sep 23 '16 at 17:58
nop tag is different .don't worry. go to the fiddle link I share on answer. look there is 4 part one for HTML, CSS, Javascript and other the last one is result. add this line to css part "a{ padding-left:5px; }" then click run from left top corner. And take a look into result section. if you still don't get it I'm here for you. :) – Baezid Mostafa Sep 23 '16 at 18:07
I got it working, Thanks! Just wondering, what does the a in front of it do/mean? – BananaConsultant Sep 23 '16 at 21:45
a tag use for link if you remove the link and replace with anyother link like .. then click on the image it will take you to google.com . Try it .. we use a tag for link up with other page or section we have.. please follow w3school.com and learn html they provide you.. then you have understand which tag is use for what.. – Baezid Mostafa Sep 23 '16 at 21:56
No not the , what is the a in front of "a{padding}" – BananaConsultant Sep 23 '16 at 21:57
a tag contain the images see the code after image you close it. We can use it for css like a class. It's better to create class inside a tag and use it on css section like other class. otherwise if you create a another section with a tag this will effect on that section two. – Baezid Mostafa Sep 23 '16 at 22:06

NSTuttle · Answer 2 · 2016-09-23T17:37:03.567

I would recommend you place both images within a parent <div>, and further you can place each image within a <div> as well. Then style parent <div> to 100%.

.image11 {
    float: left;
}

.image12,
.image11 {
    width: 50%;
    display: block;
    margin: 0 auto;
    height: auto;
    -webkit-transition: all 0.7s ease;
            transition: all 0.7s ease;
}
.image {
    //CODE HERE FOR MARGIN/PADDING OF IMAGES
}

<div class="imagesAcross">

    <div class="image">
        <a href="link">
            <img class="image11" src="http://www.w3schools.com/css/trolltunga.jpg">
        </a>

    </div>

    <div class="image">
        <a href="link">
            <img class="image12" src="http://www.w3schools.com/css/trolltunga.jpg">
        </a>
    </div>

</div>

I used the answer above, but I'm sure your's works too. Thanks! — BananaConsultant, Sep 23 '16 at 17:31

Resize html image in Weebly to available space

2 Answers2