Can anyone help me with an issue I am facing while working on a school project website? The problem is that when I enable fullscreen mode, the photos on my website become larger than intended.
For reference, here is how it looks in NOT FULLSCREEN:
And here is how it appears in FULLSCREEN:
If you need to check the code, here is the link: https://github.com/Pckpow/submission-webdes
To ensure the background-size property adjusts to auto, you must modify it
since you currently have it set to cover, which mandates
"Resizing the background image to cover the entire container, even if it means distorting the image or cropping parts of it"
For more clarity on background size properties, please review the following link:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Interactive Image Display
An image modal is a type of dialog box that appears on top of the current page to showcase images.
In this illustration, we are utilizing code snippets from a previous example - Modal Boxes, with a focus on incorporating images.
// Locate the modal element
var modal = document.getElementById("myModal");
// Grab the image and place it in the modal window, using the "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Locate the <span> element for closing the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Initially hidden */
position: fixed; /* Fixed position */
z-index: 1; /* Topmost layer */
padding-top: 100px; /* Positioning */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scrolling */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black with opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}<img id="myImg" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>I am looking to design a pagination feature that has the following appearance: On a wide screen: | | | [<<] Page # 1 of 6 [>>] | | ...
As a novice, I am currently working on building a blog using Flask and HTML. However, I have encountered an issue where my blog can only post titles and content, but I would like to include pictures as well. If anyone knows the easiest way to accomplish ...
I have a React component named "Login.js" that utilizes forms and renders the following:- return ( <div className="form-container"> <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}&g ...
I have been attempting to trigger a function every few seconds with the following code snippet: HTML: <div id="Result">Click here for the message.</div> JS: $(document).ready(function () { $("#Result").click(function () { var ...
Check out this Fiddle >> http://jsfiddle.net/fpCpc/`"> jsfiddle Having a problem where the top part of the dropdown navigation doesn't stay active when scrolling down. I even captured a screenshot for clarification! Screenshot Any tips or ...
I have a list-menu called .sidebar-menu and each li within this list has its own unique id. There is also a block called .services-info, containing several blocks with one of them supposed to appear when you click on an item in the .sidebar-menu that corre ...
With two div boxes, one for Input and the other for Output as displayed below: https://i.sstatic.net/C8dhm.png My goal is to upload an image using PHP and store it in both the Input and Output folders. Upon clicking the Submit button, I want the image f ...
Looking to create a horizontal scrolling website where the divs float to the right without specifying the container's width, as it may vary on different pages. Any suggestions? ...
Is there a way to ensure that the size and maxlength attributes of a text input box align correctly? It can be frustrating when these attributes don't match up due to font differences. Example Input: <input type="text" size="4" maxlength="4" /> ...
Recently, we added an iframe to our company's website that I have been helping manage. This iframe is responsible for handling requests sent to our organization. Interestingly, the headings on our website are styled using the following CSS: color: # ...
Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...
Looking for a way to set a fixed height for a file input with preview? Check out this Codepen example: Codepen In the HTML (vue component), there is a card element with an image that maintains its aspect ratio. However, you may want to fix the height of ...
I recently downloaded a template from the internet which came with a base HTML file, images, and a CSS file. Now, I am attempting to incorporate all of this into my Django project. Unfortunately, my efforts have not been successful so far. The webpage is ...
I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...
I attempted to change the font size of the .MuiTypography-body1 class After doing some research, I came across this helpful link https://material-ui.com/api/typography/ Unfortunately, I'm having trouble with the override not working as expected Could ...
I have encountered an issue with my Navbar specifically on Firefox. The problem I am facing is that the Navbar is flickering, constantly growing and shrinking. Interestingly, this issue does not appear when using Chrome or Opera. I'm curious to know ...
After writing the following code, it successfully fulfills its purpose; however, I encountered two issues. Firstly, it allows more than one answer to be selected, and secondly, there is no error message displayed when no answer is selected. <div id=" ...
Check out this post of mine I noticed a button on someone's page that could hide their sidebar and expand it again when clicked. How can I implement this feature? Is it a simple task? ...
How can I make a div inside a rowspanned table cell 100% high of the cell? Check out this example for reference: https://jsfiddle.net/gborgonovo/zqohw286/2/ In the provided example, I want the red div to vertically fill the yellow cell. Any suggestions on ...
Below is a snippet of code that I need help with: <p> <label>Dual Select</label> <span id="dualselect" class="dualselect"> <select name="select3" multiple="multiple" size="10"> <option value=""&g ...