This section will show you how to use CSS to lay out pictures. Example Fillet picture: Example Oval picture: We use Example Example Responsive pictures automatically adapt to screens of all sizes. In the example, you can view the effect by resizing the browser: If you need to zoom the picture freely and the size of the picture is not larger than its original maximum, you can use the following code: Example Tip: Web responsive design can refer to the CSS responsive design tutorial for more information. How to locate the picture text: Example Lower left corner Upper left corner Upper right corner Lower right corner In the middle Example CSS Note: this attribute is not supported by Internet Explorer or Safari 5.1 (and earlier). Example Change the color of all pictures to black and white (100% grayscale): Tip: visit the CSS filter reference manual for more information. Example This example demonstrates how to render a picture together with CSS and JavaScript. First, we use CSS to create the Then, we use JavaScript to display the modal window, and when we click on the picture, the picture will appear in the pop-up window: Example
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 8.16.1. Rounded corner picture ¶
img{
border-radius:8px;
}
img{
border-radius:50%;
}
8.16.2. Thumbnail image ¶
border property to create a thumbnail.img{
border:1px solid #ddd;
border-radius:4px;
padding:5px;
}
<img src="paris.jpg" alt="Paris">
a{
display:inline-block;
border:1px solid #ddd;
border-radius:4px;
padding:5px;
transition:0.3s;
}
a:hover{
box-shadow:0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
a>
8.16.3. Responsive picture ¶
img{
max-width:100%;
height:auto;
}
8.16.4. Picture text ¶
8.16.5. Card picture ¶
div.polaroid{
width:80%;
background-color:white;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,
0, 0.19);
}
img{width:100%}
div.container{
text-align:center;
padding:10px 20px;
}
8.16.6. Picture filter ¶
filter attributes are used to add visual effects to elements (for example, blur and saturation). img{
-webkit-filter:grayscale(100%); /\* Chrome, Safari, Opera \*/
filter:grayscale(100%);
}
8.16.7. Responsive photo album ¶
.responsive{
padding:0 6px;
float:left;
width:24.99999%;
}
@media only screen and (max-width: 700px){
.responsive{
width:49.99999%;
margin:6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive{
width:100%;
}
}
8.16.8. Picture Modal (mode) ¶
modal window (dialog box), which is hidden by default. // Get Modal Window
var modal = document.getElementById('myModal');
// Get the image modal box and use the alt attribute as the text description in the image pop-up
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;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes 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";
}
Principles, Technologies, and Methods of Geographic Information Systems
102