Images not fitting Div

I am attempting to create an image container where different sized images (height and width) fit in a div so that they all look the same height and width - think slide show. What I have created so far, does shrink the images but does not alter them to fit. So, although the same width, they are not the same height. I have attached an image of how the images look.

This is the css:

.col {
  width: 80%;
  margin: auto;
}
.colcontainer {
  vertical-align: top;
  width: auto;
  height: auto;
}
.colcontainer img {
  width: 75%;
  height: 75%;
  object-fit: contain;

Lightbox working and not working?

Hi
I'm working on a gallery/shop of artwork. I did a test page, just lightbox code i found. but when I put it in my actual web page it opens the image but none of the next, back, close links.
Anyone know if theres an obvious reason why this would not work.
i'm guessing its some sort of code clash but im not too hot with this stuff

Thanks

Change an image file on button-click

Hi, Complete newbie with JS.

Looking for ideas on JavaScript code to change an image on button-click.

My website is "under construction", the image changes are to show it is a "working" holding page.
Hopefully to keep visitors' interest.
(The library of images will be changed fairly often while the site is built).

Several images available, all with same name plus a number ...
eg: ppImg1, ppImg2, ... ppImg9, ppImg10, etc.

Basic idea is to have a counter set to zero the first time the page is brought up.

Removing an image from template page through CSS edit

Hi,

Im looking at removing an image from templated page using a piece of CSS but cant seen to figure out what CSS to use.

The page is https://magnetstore.co.uk/cart/

and i want to remove the large product image covering the main view of the page

Limited experience and a digital marketing manager.

I found a post using the following code

.woocommerce-cart td.product-thumbnail {
display: none;
}
@media (max-width: 767px){
.woocommerce .cart.shop_table .product-name {
display: block !important;
}
}

Divs don't expand to fit in rollover image hyperlinks

Hello everyone,

Hello everyone,

I am trying to make a navigation bar. I want the buttons to be image hyperlinks that change opacity on hover and click. This is how I am doing it:

<style>
	.jw-button a:link,
	.jw-button a:visited
	{
		border: 2px dotted orange;	
		opacity: 0.6;
		overflow: hidden;
	}
 
	.jw-button a:hover,
	.jw-button a:active
	{
		border: 2px dotted yellow;	
		text-decoration: none; /* to remove the little line */
		opacity: 0.95;
		overflow: hidden;
	}
</style>
 
<body>
 
	<div class="jw-button"> 
 

Syndicate content