fixed size of image in best film small screen
This commit is contained in:
parent
8829df6d2b
commit
b7f66d09a7
@ -15,6 +15,11 @@
|
|||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
.bfilm {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10rem;
|
top: 10rem;
|
||||||
@ -28,6 +33,7 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
@ -10,18 +10,19 @@ async function bestFilm(filmId) {
|
|||||||
let blockToLook = document.getElementById("bestFilm");
|
let blockToLook = document.getElementById("bestFilm");
|
||||||
|
|
||||||
let detail = `
|
let detail = `
|
||||||
<div class="row">
|
|
||||||
<div class="col d-flex justify-content-center my-2">
|
<div class="col d-flex justify-content-center my-2">
|
||||||
<img class="img-fluid" src="${bfilm.image_url}" alt="film cover">
|
<img class="img-fluid d-none d-md-block" src="${bfilm.image_url}" alt="film cover">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12 col-md-9 my-3">
|
<div class="col-12 d-flex items- d-block d-md-none">
|
||||||
|
<div class="bfilm" style="background-image: url(${bfilm.image_url}); "></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-9 my-3">
|
||||||
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
|
<div class="col-12 d-flex justify-content-start"><h2>${bfilm.title}</h2></div>
|
||||||
<div class="col-12">${bfilm.description}</div>
|
<div class="col-12">${bfilm.description}</div>
|
||||||
<div class="col-12 d-flex justify-content-end">
|
<div class="col-12 d-flex justify-content-end">
|
||||||
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
<button type="button" class="btn btn-danger rounded-4 px-4" data-toggle="modal" data-target="#${bfilm.id}">Détail</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
blockToLook.innerHTML += detail;
|
blockToLook.innerHTML += detail;
|
||||||
getModalDetail(bfilm, bfilm.id, blockToLook);
|
getModalDetail(bfilm, bfilm.id, blockToLook);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user