I have a page with preview of images. All images are different size, but preview should be all square.
/* This is the CSS code which sets automatic height: */
.preview-img {
width: 100%;
height: auto;
object-fit: cover;
}
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/01-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/02-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/03-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
</div>
How can I set the height of an image according to it's width, without using pixels?
.preview-img {
width: 100%;
padding-bottom: 100%;
height: 0;
object-fit: cover;
}
This should work on all major browsers.
If you can use javascript,
window.addEventListener("resize", function(e) {
var element = document.getElementsByClassName("preview-img");
mapElement.style.height = mapElement.width;
});
Related
I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
I'm not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)
For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
Folks,
I'm trying to build with bootstrap. Following this basic markup:
<div class="container">
<header class="row">
</header>
<div class="row">
<div role="main" class="col-md-8">
</div>
<aside role="complementary" class="col-md-4">
</aside>
</div>
<footer class="row">
</footer>
</div>
I created the following page:
http://clubedebeneficiosunilife.com.br/thumbs-promocoes-logadoTest2.php
The problem that the thumbs were 'stretched' occupying all available space. I wish it were that displayed:
http://clubedebeneficiosunilife.com.br/main-col-side-bar.png
That is, the 'main' column in a notebook or desktop occupying 75% of the screen and 'terras' column containing the sidebar should occupy 25% of the width.
Only within the column 'main' I need to be displayed 4 thumbs (as print). I've tried everything
I'm already on my knees asking for help. Does anyone know how to solve?
Thank you in advance.
before thumbnail class just add class col-md-3 class then it will give you the exact result
.thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
min-height: 165px;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
<div class=" col-md-3">
<a class="thumbnail" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">-->
</a>
</div>
add this style to your website
.thumbnail {
display: inline-block;
margin-right: 20px;
width: 22%;
}
Try This
CSS
.thumbnail{
border:0;
}
.thumbnail img{
border:1px solid gray;
}
HTML
<div class"container-fluid">
<div class="row">
<aside role="complementary" class="col-md-4">
</aside>
</div>
<!--<div role="main" class="col-md-8 thumb">-->
<div role="main" class="col-md-8 col-lg-4 thumb">
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
</div>
<!--<div class="col-lg-12 col-md-12 col-xs-12 thumb">-->
<aside role="complementary" class="col-md-4">
<div class="arrowlistmenu"> <h3 class="headerbar">Categorias</h3>
<ul> <li class="arrowlistmenu">Academias</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=2">Artigos
Esportivos</a></li> <li>Automotivo</li>
<li>Alimentação</li>
<li>Compras</li>
<li>Beleza</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=7">Educação
e Cultura</a></li> <li>Informática</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=9">Lazer
e Entretenimento</a></li> <li>Medicina e Saúde</li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=11">Móveis
e Decoração</a></li> <li>Serviços</li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=13">Viagem
e Turismo</a></li> </ul>
</div> </aside>
<!--</div>-->
</div>
</div>
I am trying to align images horizontally but there is a weird cascading down effect. How can I solve this?
HTML (Drupal)
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
</div>
CSS
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
Image
hi as you said here is the solution may be what you want please look out the code
.view-content{
display:block;
}
.views-row{
float:left;
margin:5px;
padding:5px;
border:1px solid grey;
}
.views-field.views-field-title {
text-align: center;
}
.field-content img {
width: 150px;
height: 200px;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://www.iconpng.com/png/stickers/books.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/512/Books-2-icon.png" alt="Smiley face">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/simple-black-square-icons-culture/126872-simple-black-square-icon-culture-books3-stacked.png" alt="Smiley face">
</a>
</div>
</div>
</div>
</div>
and here is the demo working code of this code
DEMO
You should wrap your Book html (title, link, image) in one div. And set float to that div wrapper. Like this:
<div class="book">
<div class="book-title">Up Country</div>
<div class="book-image"><img src="#1" alt="" /></div>
</div>
<div class="book">
<div class="book-title">The Quest</div>
<div class="book-image"><img src="#2" alt="" /></div>
</div>
<div class="book">
<div class="book-title">Radiant Angel</div>
<div class="book-image"><img src="#3" alt="" /></div>
</div>
And the book div will have this style:
.book {
float: left;
}
You don't have to put many "classes" and "divs". It can make you more confused and if you don't remove them, you have to put many properties in your classes. I think the codes below will solve your problem.
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-field {
float:left;
}
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
<div class="views-field">
Up Country <br/>
<img typeof="foaf:Image" src="xxx.jpg" width="126" height="192" alt="" />
</div>
</div>
</div>
Add following css code snippet into your code:
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
Example Code
<!DOCTYPE html>
<html>
<head>
<style>
.field-content img {
float: left;
padding-right: 10px;
max-width: 100%;
height: auto;
}
.views-row.views-row-1.views-row-odd.views-row-first {
display: inline-block;
}
</style>
</head>
<body>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title">
<span class="field-content">Up Country</span>
</div>
<div class="views-field views-field-field-book-image">
<div class="field-content">
<a href="/country">
<img src="https://i.stack.imgur.com/9CFdC.jpg?s=48&g=1" alt="Smiley face" width="42" height="42">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Hope this is what you are looking for :P
Output screenshot :
Added different image url for each image tag.